NeHe Productions OpenGL Tutorials

Tutorial Index

Setting Up OpenGL In MacOS:

This is not a tutorial, but a step by step walkthrough done by Tony Parker on how to install OpenGL and Glut under Mac OS. Tony has kindly ported the OpenGL tutorials I've done to Mac OS with GLUT. I hope everyone enjoys the ports.

I know alot of people have asked for Mac ports so support Tony by telling him how much you enjoy the ports. Without his work converting the projects there wouldn't be a Mac port.

Setting Up OpenGL In Solaris:

This is not a tutorial, but a step by step walkthrough done by Lakmal Gunasekara on how to install OpenGL and Glut under Solaris. Lakmal has kindly ported most of the OpenGL tutorials I've done to both Irix and Solaris. I hope everyone enjoys the ports.

If you'd like to port the code to another OS or Language, please contact me, and let me know. Before you start porting, keep in mind that I'd prefer all the code to be ported, rather than just a few of the tutorials. That way, people learning from a port can learn at the same rate as the VC guys.

Setting Up OpenGL In Windows:

In this tutorial, I will teach you how to set up, and use OpenGL in a Windows environment. The program you create in this tutorial will display an empty OpenGL window, switch the computer into fullscreen or windowed mode, and wait for you to press ESC or close the Window to exit. It doesn't sound like much, but this program will be the framework for every other tutorial I release in the next while.

It's very important to understand how OpenGL works, what goes into creating an OpenGL Window, and how to write simple easy to understand code. You can download the code at the end of the tutorial, but I definitely recommend you read over the tutorial at least once, before you start programming in OpenGL.

Your First Polygon:

Using the source code from the first tutorial, we will now add code to create a Triangle, and a Square on the screen. I know you're probably thinking to yourself "a triangle and square... oh joy", but it really is a BIG deal. Just about everything you create in OpenGL will be created out of triangles and squares. If you don't understand how to create a simple little triangle in Three Dimensional space, you'll be completely lost down the road. So read through this chapter and learn.

Once you've read through this chapter, you should understand the X axis, Y axis and Z axis. You will learn about translation left, right, up, down, into and out of the screen. You should understand how to place an object on the screen exactly where you want it to be. You will also learn a bit about the depth buffer (placing objects into the screen).

Colors:

Expanding on the second tutorial I will teach you how to create spectacular colors in OpenGL with very little effort. You will learn about both flat coloring and smooth coloring. The triangle on the left uses smooth coloring. The square on the right is using flat coloring. Notice how the colors on the triangle blend together.

Color adds alot to an OpenGL project. By understanding both flat and smooth coloring, you can greatly enhance the way your OpenGL demos look.

Rotation:

Moving right along. In this tutorial I'll teach you how to rotate both the triangle and the quad. The triangle will rotate on the Y axis, and the quad will rotate on the X axis. This tutorial will introduce 2 variables. rtri is used to store the angle of the triangle, and rquad will store the angle of the quad.

It's easy to create a scene made up of polygons. Adding motion to those object makes the scene come alive. In later tutorials I'll teach you how to rotate an object around a point on the screen causing the object to move around the screen rather than spin on its axis.

Solid Objects:

Now that we have setup, polygons, quads, colors and rotation figured out, it's time to build 3D objects. We'll build the objects using polygons and quads. This time we'll expand on the last tutorial, and turn the triangle into a colorful pyramid, and turn the square into a solid cube. The pyramid will use blended colors, the cube will have a different color for each face.

Building an object in 3D can be very time consuming, but the results are usually worth it. Your imagination is the limit!

Texture Mapping:

You asked for it, so here it is... Texture Mapping!!! In this tutorial I'll teach you how map a bitmap image onto the six side of a cube. We'll use the GL code from lesson one to create this project. It's easier to start with an empty GL window than to modify the last tutorial.

You'll find the code from lesson one is extremely valuable when it comes to developing a project quickly. The code in lesson one sets everything up for you, all you have to do is concentrate on programming the effect(s).

Texture Filters, Lighting & Keyboard Control:

Ok, I hope you've been understanding everything up till now, because this is a huge tutorial. I'm going to attempt to teach you 2 new ways to filter your textures, simple lighting, keyboard control, and probably more :) If you don't feel confident with what you've learned up to this lesson, go back and review. Play around with the code in the other tutorials. Don't rush. It's better to take your time and learn each lesson well, than to jump in, and only know enough to get things done.

* Blending:

There was a reason for the wait. A fellow programmer from the totally cool site Hypercosm, had asked if he could write a tutorial on blending. Lesson eight was going to be a blending tutorial anyways. So the timing was perfect! This tutorial expands on lesson seven. Blending is a very cool effect... I hope you all enjoy the tutorial. The author of this tutorial is Tom Stanis. He's put alot of effort into the tutorial, so let him know what you think. Blending is not an easy topic to cover.

Moving Bitmaps In 3D Space:

This tutorial covers a few of the topics you guys had requested. You wanted to know how to move the objects you've made around the screen in 3D. You wanted to know how to draw a bitmap to the screen, without the black part of the image covering up what's behind it. You wanted simple animation and more uses for blending. This tutorial will teach you all of that. You'll notice there's no spinning boxes. The previous tutorials covered the basics of OpenGL. Each tutorial expanded on the last. This tutorial is a combination of everything that you have learned up till now, along with information on how to move your object in 3D. This tutorial is a little more advanced, so make sure you understand the previous tutorials before you jump into this tutorial.

* Loading And Moving Through A 3D World:

The tutorial you have all been waiting for! This tutorial was made by a fellow programmer named Lionel Brits. In this lesson you will learn how to load a 3D world from a data file, and move through the 3D world. The code is made using lesson 1 code, however, the tutorial web page only explains the NEW code used to load the 3D scene, and move around inside the 3D world. Download the VC++ code, and follow through it as you read the tutorial. Keys to try out are [B]lend, [F]iltering, [L]ighting (light does not move with the scene however), and Page Up/Down. I hope you enjoy Lionel's contribution to the site. When I have time I'll make the Tutorial easier to follow.

* OpenGL Flag Effect:

This tutorials brought to you by Bosco. The same guy that created the totally cool mini demo called worthless. He enjoyed everyones reaction to his demo, and decided to go one step further and explain how he does the cool effect at the end of his demo. This tutorial builds on the code from lesson 6. By the end of the tutorial you should be able to bend fold and manipulate textures of your own. It's definitely a nice effect, and alot better than flat non moving textures. If you enjoy the tutorial, please email bosco and let him know.

Display Lists:

Want to know how to speed up you OpenGL programs? Tired of writing lots of code every time you want to put an object on the screen? If so, this tutorial is definitely for you. Learn how to use OpenGL display lists. Prebuild objects and display them on the screen with just one line of code. Speed up your programs by using precompiled objects in your programs. Stop writing the same code over and over. Let display lists do all the work for you! In this tutorial we'll build the Q-Bert pyramids using just a few lines of code thanks to display lists.

Bitmap Fonts:

I think the question I get asked most often in email is "how can I display text on the screen using OpenGL?". You could always texture map text onto your screen. Of course you have very little control over the text, and unless you're good at blending, the text usually ends up mixing with the images on the screen. If you'd like an easy way to write the text you want anywhere you want on the screen in any color you want, using any of your computers built in fonts, then this tutorial is definitely for you. Bitmaps font's are 2D scalable fonts, they can not be rotated. They always face forward.

Outline Fonts:

Bitmap fonts not good enough? Do you need control over where the fonts are on the Z axis? Do you need 3D fonts (fonts with actual depth)? Do you need wireframe fonts? If so, Outline fonts are the perfect solution. You can move them along the Z axis, and they resize. You can spin them around on an axis (something you can't do with bitmap fonts), and because proper normals are generated for each character, they can be lit up with lighting. You can build Outline fonts using any of the fonts installed on your computer. Definitely a nice font to use in games and demos.

Texture Mapped Fonts:

Hopefully my last font tutorial {grin}. This time we learn a quick and fairly nice looking way to texture map fonts, and any other 3D object on your screen. By playing around with the code, you can create some pretty cool special effects, Everything from normal texture mapped object to sphere mapped objects. In case you don't know... Sphere mapping creates a metalic looking object that reflects anything from a pattern to a picture.

* Cool Looking Fog:

This tutorial was generously donated to the site by Chris Aliotta. It based on the code from lesson 7, that why you're seeing the famous crate again :) It's a pretty short tutorial aimed at teaching you the art of fog. You'll learn how to use 3 different fog filters, how to change the color of the fog, and how to set how far into the screen the fog starts and how far into the screen it ends. Definitely a nice effect to know!

* 2D Texture Font:

The original version of this tutorial was written by Giuseppe D'Agata. In this tutorial you will learn how to write any character or phrase you want to the screen using texture mapped quads. You will learn how to read one of 256 different characters from a 256x256 texture map, and finally I will show you how to place each character on the screen using pixels rather than units. Even if you're not interested in drawing 2D texture mapped characters to the screen, there is lots to learn from this tutorial. Definitely worth reading!

* Quadratics:

This tutorial was written by GB Schmick the wonderful site op over at TipTup. It will introduce you to the wonderful world of quadratics. With quadratics you can easily create complex objects such as spheres, discs, cylinders and cones. These object can be created with just one line of code. With some fancy math and planning it should be possible to morph these objects from one object into another. Please let GB Schmick know what you think of the tutorial, it's always nice when visitors contribute to the site, it benefits us all. Everyone that has contributed a tutorial or project deserves credit, please let them know their work is appreciated!

Particle Engine Using Triangle Strips:

Have you ever wanted to create an explosion, water fountain, flaming star, or some other cool effect in your OpenGL program, but writing a particle engine was either too hard, or just too complex? If so, this tutorial is for you. You'll learn how to program a simple but nice looking particle engine. I've thrown in a few extras like a rainbow mode, and lots of keyboard interaction. You'll also learn how to create OpenGL triangle strips. I hope you find the code both useful and entertaining.

Masking:

Up until now we've been blending our images onto the screen. Although this is effective, and it adds our image to the scene, a transparent object is not always pretty. Lets say you're making a game and you want solid text, or an odd shaped console to pop up. With regular blending this is not possible. By combining some fancy blending with an image mask, your text can be solid. You can also place solid oddly shaped images onto the screen. A tree with solid branches and non transparent leaves or a window, with transparent glass and a solid frame. Lots of possiblities!

Lines, Antialiasing, Timing, Ortho View And Simple Sounds:

This is my first large tutorial. In this tutorial you will learn about: Lines, Anti-Aliasing, Orthographic Projection, Timing, Basic Sound Effects, and Simple Game Logic. Hopefully there's enough in this tutorial to keep everyone happy :) I spent 2 days coding this tutorial, and about 2 weeks writing this HTML file. If you've ever played Amidar the game you write in this tutorial may bring back memories. You have to fill in a grid while avoiding nasty enemies. A special item appears from time to time to help make life easier. Learn lots and have fun doing it!

Bump-Mapping, Multi-Texturing & Extensions:

This tutorial was written by Jens Schneider. Right off the start I'd like to point out that this is an advanced tutorial. If you're still uncertain about the basics, please go back and read the previous tutorials. If you're a new GL programmer, this lesson may be a bit much. In this lesson, you will modify the code from lesson 6 to support hardware multi-texturing on cards that support it, along with a really cool visual effect called bump-mapping. Please let Jens Schneider know what you think of the tutorial, it's always nice when visitors contribute to the site, it benefits us all. Everyone that has contributed a tutorial or project deserves credit, please let them know their work is appreciated!

Using Direct Input With OpenGL:

This tutorial was written by Justin Eslinger and is based on lesson 10. Instead of focusing on OpenGL this tutorial will teach you how to use DirectInput in your OpenGL programs. I have had many requests for such a tutorial, so here it is. The code in lesson 10 will be modified to allow you to look around with the mouse and move with the arrow keys. Something you should know if you plan to write that killer 3D engine :) I hope you appreciate Justin's work. He spent alot of time making the tutorial unique (reading textures from the data file, etc), and I spent alot of time tweaking things, and making the HTML look pretty. If you enjoy this tutorial let him know!

* Sphere Mapping Quadratics In OpenGL:

This tutorial was written by GB Schmick and is based on his quadratics tutorial (lesson 18). In lesson 15 (texture mapped fonts) I talked a little bit about sphere mapping. I explained how to auto-generate texture coordinates, and how to set up sphere mapping, but because lesson 15 was fairly simple I decided to keep the tutorial simple, leaving out alot of details in regards to sphere mapping. Now that the tutorials are a little more advanced it's time to dive into the world of sphere mapping. TipTup did an excellent job on the tutorial, so if you appreciate his work, let him know!

Tokens, Extensions, Scissor Testing And TGA Loading:

In this tutorial I will teach you how to read and parse what OpenGL extensions are supported by your video card. I will also show you how to use scissor testing to create a cool scrolling window effect. And most importantly I will show you how to load and use TGA (targa) image files as textures in projects of your own. TGA files support the alpha channel, allowing you to create some great blending effects, and they are easy to create and work with. Not only that, by using TGA files, we no longer depend on the glAUX library. Something I'm sure alot of you guys will appreciate!

* Morphing & Loading Objects From A File:

This tutorial was written by Piotr Cieslak. Learn how to load simple objects from a text file, and morph smoothly from one object into another. The effect in this tutorial has to be seen to be appreciated. The effect taught in this demo can be used to animated objects similar to the swimming dolphin in my Dolphin demo, or to twist and bend objects into many different shapes. You can also modify the code to use lines or solid polygons. Great effect! Hope you appreciate Piotr's work!

* Real Reflections Using The Stencil Buffer:

This tutorial code was written by Banu Octavian. Learn how to create amazingly real looking reflections using the stencil buffer. Unlike fake reflections, you wont see the reflected object floating under the floor or on the other side of a wall. The object in this tutorial reflects in the floor and only in the floor! Writing this tutorial was VERY time consuming. The stencil buffer is very complex, very powerful, and difficult to explain. Unfortunately, this tutorial will not work on video cards that do not support the stencil buffer (Voodoo 1/2/3). Try the code before you start reading the tutorial! Hope you enjoy Banu's work, along with my own!

* Shadows

This is an advanced tutorial. Before you decide to try out shadows, make sure you completely understand the base code, and make sure you are familiar with the stencil buffer. This tutorial was made possible by both Banu Cosmin & Brett Porter. Banu wrote the original code. Brett cleaned the code up, combined it into one file, and wrote the HTML for the tutorial. The effect is amazing! Shadows that actual wrap around objects, and distort on the walls and floor. Thanks to Banu and Brett for their hard work, this is truely a great tutorial!

* Bezier Patches / Fullscreen Fix:

David Nikdel is the man behind this super cool tutorial. Learn how to create bezier patches. Learn how to alter a surface by modifying control points. The surface being altered is fully texture mapped, the animation is smooth! Left and Right arrow keys rotate the object while the Up and Down arrows raise and lower the resolution. This tutorial also eliminates the fullscreen problems a few of you have been having! Thanks to David for modifying the code! If you appreciate his work, let him know!

* Blitter Function, RAW Texture Loading:

This tutorial was written by Andreas Löffler. In this tutorial you will learn how to load .RAW image files. You will also learn how to write your own blitter routine to modify textures after they have been loaded. You can copy sections of the first texture into a second texture, you can blend textures together, and you can stretch textures. The same routine can be modified to create realtime plasma and other cool effects! If you enjoy the tutorial let Andreas know!

I am not a guru programmer. I am an average programmer, learning new things about OpenGL every day.
I do not claim to know everything. I do not guarantee my code is bug free. I have made every
effort humanly possible to elminate all bugs but this is not always an easy task.
Please keep this in mind while going through the tutorials!

Go To NeHe Productions!


Setting Up OpenGL In MacOS

OpenGL On MacOS
So you've been wanting to setup OpenGL on MacOS? Here's the place to learn what you need and how you need to do it.

What You'll Need:

First and foremost, you'll need a compiler. By far the best and most popular on the Macintosh is Metrowerks Codewarrior. If you're a student, get the educational version - there's no difference between it and the professional version and it'll cost you a lot less.

Next, you'll need the OpenGL SDK (that's Software Development Kit) from Apple. Now we're ready to create an OpenGL program!

Getting Started with GLUT:

Ok, here is the beginning of the program, where we include headers:
    #include <GL/gl.h>
    #include <GL/glu.h>
    #include <GL/glut.h>
    #include "tk.h"
The first is the standard OpenGL calls, the other three provide additional calls which we will use in our programs.

Next, we define some constants:
    #define kWindowWidth	400
    #define kWindowHeight	300
We use these for the height and width of our window. Next, the function prototypes:
    GLvoid InitGL(GLvoid);
    GLvoid DrawGLScene(GLvoid);
    GLvoid ReSizeGLScene(int Width, int Height);
... and the main() function:
    int main(int argc, char** argv)
    {

        glutInit(&argc, argv);
        glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB | GLUT_DEPTH);
        glutInitWindowSize (kWindowWidth, kWindowHeight);
        glutInitWindowPosition (100, 100);
        glutCreateWindow (argv[0]);

        InitGL();

        glutDisplayFunc(DrawGLScene);
        glutReshapeFunc(ReSizeGLScene);

        glutMainLoop();

        return 0;
    }
glutInit(), glutInitDisplayMode(), glutInitWindowSize(), glutInitWindowPosition(), and glutCreateWindow() all set up our OpenGL program. InitGL() does the same thing in the Mac program as in the Windows program. glutDisplayFunc(DrawGLScene) tells GLUT that we want the DrawGLScene function to be used when we want to draw the scene. glutReshapeFunc(ReSizeGLScene) tells GLUT that we want the ReSizeGLScene function to be used if the window is resized.

Later, we will use glutKeyboardFunc(), which tells GLUT which function we want to use when a key is pressed, and glutIdleFunc() which tells GLUT which function it will call repeatedly (we'll use it to spin stuff in space).

Finally, glutMainLoop() starts the program. Once this is called, it will only return to the main() function when the program is quitting.

You're done!

Well, that's about it. Most everything else is the same as NeHe's examples. I suggest you look at the Read Me included with the MacOS ports, as it has more detail on specific changes from the examples themselves.

Have fun!

Tony Parker, asp@usc.edu

Back To Index!


Setting Up OpenGL In Solaris

OpenGL Under Solaris
This document describes (quick and dirty) how to install OpenGL and GLUT libraries under Solaris 7 on a Sun workstation.

The Development Tools:

Make sure you have a Solaris DEVELOPER installation on your machine. This means you have all the header files that are nessesary for program development under Solaris installed. The easiest way is to install Solaris as a development version. This can be done from the normal Solaris installation CD ROM.

After you've done this you should have your /usr/include and /usr/openwin/include directories filled with nice liddle header files.

The C Compiler:

Sun doesn't ship a C or C++ compiler with Solaris. But you're lucky. You don't have to pay :-)
http://www.sunfreeware.com/
There you find gcc the GNU Compiler Collection for Solaris precompiled and ready for easy installation. Get the version you like and install it.
> pkgadd gcc-xxxversion
This will install gcc under /usr/local. You can also do this with admintool:
> admintool
Browse->Software
Edit->Add

Then choose Source: "Hard disk" and specify the directory that you've stored the package in.

I recommend also downloading and installation of the libstdc++ library if nessesary for you gcc version.

The OpenGL library

OpenGL should be shipped with Solaris these days. Check if you've already installed it.
> cd /usr/openwin/lib

> ls libGL*
This should print:
libGL.so@     libGLU.so@     libGLw.so@
libGL.so.1*   libGLU.so.1*   libGLw.so.1*
This means that you have the libraries already installed (runtime version).

But are the header files also there?
> cd /usr/openwin/include/GL

> ls
This should print:
gl.h          glu.h         glxmd.h       glxtokens.h
glmacros.h    glx.h         glxproto.h
I have it. But what version is it?

This is a FAQ.
http://www.sun.com/software/graphics/OpenGL/Developer/FAQ-1.1.2.html
Helps you with questions dealing with OpenGL on Sun platforms.

Yes cool. Seems they're ready. Skip the rest of this step and go to GLUT.

You don't already have OpenGL? Your version is too old? Download a new one:
http://www.sun.com/solaris/opengl/
Helps you. Make sure to get the nessesary patches for your OS version and install them. BTW. You need root access to do this. Ask you local sysadmin to do it for you. Follow the online guide for installation.

GLUT

Now you have OpenGL but not GLUT. Where can you get it? Look right here:
http://www.sun.com/software/graphics/OpenGL/Demos/index.html
Following the links will take you to this location:
http://reality.sgi.com/opengl/glut3/glut3.html#sun
I've personally downloaded the 32bit version unless I run the 64 bit kernel of Solaris. I've installed GLUT under /usr/local. This is normally a good place for stuff like this.

Well I have it, but when I try to run the samples in progs/ it claims that it can't find libglut.a. To tell your OS where to look for runtime libraries you need to add the path to GLUT to your variable LD_LIBRARY_PATH.

If you're using /bin/sh do something like this:
> LD_LIBRARY_PATH=/lib:/usr/lib:/usr/openwin/lib:/usr/dt/lib:/usr/local/lib:/usr/local/sparc_solaris/glut-3.7/lib/glut

> export LD_LIBRARY_PATH
If you're using a csh do something like this:
>setenv LD_LIBRARY_PATH /lib:/usr/lib:/usr/openwin/lib:/usr/dt/lib:/usr/local/lib:/usr/local/sparc_solaris/glut-3.7/lib/glut
Verify that everything is correct:
> echo $LD_LIBRARY_PATH

/lib:/usr/lib:/usr/openwin/lib:/usr/dt/lib:/usr/local/lib:/usr/local/sparc_solaris/glut-3.7/lib/glut
Congratulations you're done!

That's it folks. Now you should be ready to compile and run NeHe's OpenGL tutorials.

If you find spelling mistakes (I'm not a native english speaking beeing), errors in my description, outdated links, or have a better install procedure please contact me.

- Lakmal Gunasekara 1999 for NeHe Productions.


Lesson 01 - Setting Up OpenGL In Windows

Lesson 1
Welcome to my OpenGL tutorials. I am an average guy with a passion for OpenGL! The first time I heard about OpenGL was back when 3Dfx released their Hardware accelerated OpenGL driver for the Voodoo 1 card. Immediately I knew OpenGL was something I had to learn. Unfortunately, it was very hard to find any information about OpenGL in books or on the net. I spent hours trying to make code work and even more time begging people for help in email and on IRC. I found that those people that understood OpenGL considered themselves elite, and had no interest in sharing their knowledge. VERY frustrating!

I created this web site so that people interested in learning OpenGL would have a place to come if they needed help. In each of my tutorials I try to explain, in as much detail as humanly possible, what each line of code is doing. I try to keep my code simple (no MFC code to learn)! An absolute newbie to both Visual C++ and OpenGL should be able to go through the code, and have a pretty good idea of what's going on. My site is just one of many sites offering OpenGL tutorials. If you're a hardcore OpenGL programmer, my site may be too simplistic, but if you're just starting out, I feel my site has a lot to offer!

This tutorial was completely rewritten January 2000. This tutorial will teach you how to set up an OpenGL window. The window can be windowed or fullscreen, any size you want, any resolution you want, and any color depth you want. The code is very flexible and can be used for all your OpenGL projects. All my tutorials will be based on this code! I wrote the code to be flexible, and powerful at the same time. All errors are reported. There should be no memory leaks, and the code is easy to read and easy to modify. Thanks to Fredric Echols for his modifications to the code!

I'll start this tutorial by jumping right into the code. The first thing you will have to do is build a project in Visual C++. If you don't know how to do that, you should not be learning OpenGL, you should be learning Visual C++. The downloadable code is Visual C++ 6.0 code. Some versions of VC++ require that bool is changed to BOOL, true is changed to TRUE, and false is changed to FALSE. By making the changes mentioned, I have been able to compile the code on Visual C++ 4.0 and 5.0 with no other problems.

After you have created a new Win32 Application (NOT a console application) in Visual C++, you will need to link the OpenGL libraries. In Visual C++ go to Project, Settings, and then click on the LINK tab. Under "Object/Library Modules" at the beginning of the line (before kernel32.lib) add OpenGL32.lib GLu32.lib and GLaux.lib. Once you've done this click on OK. You're now ready to write an OpenGL Windows program.

The first 4 lines include the header files for each library we are using. The lines look like this:
#include <windows.h>								// Header File For Windows
#include <gl\gl.h>								// Header File For The OpenGL32 Library
#include <gl\glu.h>								// Header File For The GLu32 Library
#include <gl\glaux.h>								// Header File For The GLaux Library
Next you need to set up all the variables you plan to use in your program. This program will create a blank OpenGL window, so we won't need to set up a lot of variables just yet. The few variables that we do set up are very important, and will be used in just about every OpenGL program you write using this code.

The first line sets up a Rendering Context. Every OpenGL program is linked to a Rendering Context. A Rendering Context is what links OpenGL calls to the Device Context. The OpenGL Rendering Context is defined as hRC. In order for your program to draw to a Window you need to create a Device Context, this is done in the second line. The Windows Device Context is defined as hDC. The DC connects the Window to the GDI (Graphics Device Interface). The RC connects OpenGL to the DC.

In the third line the variable hWnd will hold the handle assigned to our window by Windows, and finally, the fourth line creates an Instance (occurrence) for our program.
HDC		hDC=NULL;							// Private GDI Device Context
HGLRC		hRC=NULL;							// Permanent Rendering Context
HWND		hWnd=NULL;							// Holds Our Window Handle
HINSTANCE	hInstance;							// Holds The Instance Of The Application
The first line below sets up an array that we will use to monitor key presses on the keyboard. There are many ways to watch for key presses on the keyboard, but this is the way I do it. It's reliable, and it can handle more than one key being pressed at a time.

The active variable will be used to tell our program whether or not our Window has been minimized to the taskbar or not. If the Window has been minimized we can do anything from suspend the code to exit the program. I like to suspend the program. That way it won't keep running in the background when it's minimized.

The variable fullscreen is fairly obvious. If our program is running in fullscreen mode, fullscreen will be TRUE, if our program is running in Windowed mode, fullscreen will be FALSE. It's important to make this global so that each procedure knows if the program is running in fullscreen mode or not.
bool	keys[256];								// Array Used For The Keyboard Routine
bool	active=TRUE;								// Window Active Flag Set To TRUE By Default
bool	fullscreen=TRUE;							// Fullscreen Flag Set To Fullscreen Mode By Default
Now we have to define WndProc(). The reason we have to do this is because CreateGLWindow() has a reference to WndProc() but WndProc() comes after CreateGLWindow(). In C if we want to access a procedure or section of code that comes after the section of code we are currently in we have to declare the section of code we wish to access at the top of our program. So in the following line we define WndProc() so that CreateGLWindow() can make reference to WndProc().
LRESULT	CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);				// Declaration For WndProc
The job of the next section of code is to resize the OpenGL scene whenever the window (assuming you are using a Window rather than fullscreen mode) has been resized. Even if you are not able to resize the window (for example, you're in fullscreen mode), this routine will still be called at least once when the program is first run to set up our perspective view. The OpenGL scene will be resized based on the width and height of the window it's being displayed in.
GLvoid ReSizeGLScene(GLsizei width, GLsizei height)				// Resize And Initialize The GL Window
{
    if (height==0)								// Prevent A Divide By Zero By
    {
        height=1;							// Making Height Equal One
    }

    glViewport(0, 0, width, height);					// Reset The Current Viewport
The following lines set the screen up for a perspective view. Meaning things in the distance get smaller. This creates a realistic looking scene. The perspective is calculated with a 45 degree viewing angle based on the windows width and height. The 0.1f, 100.0f is the starting point and ending point for how deep we can draw into the screen.

glMatrixMode(GL_PROJECTION) indicates that the next 2 lines of code will affect the projection matrix. The perspective matrix is responsible for adding perspective to our scene. glLoadIdentity() is similar to a reset. It restores the selected matrix to it's original state. After glLoadIdentity() has been called we set up our perspective view for the scene. glMatrixMode(GL_MODELVIEW) indicates that any new transformations will affect the modelview matrix. The modelview matrix is where our object information is stored. Lastly we reset the modelview matrix. Don't worry if you don't understand this stuff, I will be explaining it all in later tutorials. Just know that it HAS to be done if you want a nice perspective scene.
    glMatrixMode(GL_PROJECTION);						// Select The Projection Matrix
    glLoadIdentity();							// Reset The Projection Matrix

    // Calculate The Aspect Ratio Of The Window
    gluPerspective(45.0f,(GLfloat)width/(GLfloat)height,0.1f,100.0f);

    glMatrixMode(GL_MODELVIEW);						// Select The Modelview Matrix
    glLoadIdentity();							// Reset The Modelview Matrix
}
In the next section of code we do all of the setup for OpenGL. We set what color to clear the screen to, we turn on the depth buffer, enable smooth shading, etc. This routine will not be called until the OpenGL Window has been created. This procedure returns a value but because our initialization isn't that complex we wont worry about the value for now.
int InitGL(GLvoid)								// All Setup For OpenGL Goes Here
{
The next line enables smooth shading. Smooth shading blends colors nicely across a polygon, and smoothes out lighting. I will explain smooth shading in more detail in another tutorial.
    glShadeModel(GL_SMOOTH);						// Enables Smooth Shading
The following line sets the color of the screen when it clears. If you don't know how colors work, I'll quickly explain. The color values range from 0.0f to 1.0f. 0.0f being the darkest and 1.0f being the brightest. The first parameter after glClearColor is the Red Intensity, the second parameter is for Green and the third is for Blue. The higher the number is to 1.0f, the brighter that specific color will be. The last number is an Alpha value. When it comes to clearing the screen, we wont worry about the 4th number. For now leave it at 0.0f. I will explain its use in another tutorial.

You create different colors by mixing the three primary colors for light (red, green, blue). Hope you learned primaries in school. So, if you had glClearColor(0.0f,0.0f,1.0f,0.0f) you would be clearing the screen to a bright blue. If you had glClearColor(0.5f,0.0f,0.0f,0.0f) you would be clearing the screen to a medium red. Not bright (1.0f) and not dark (0.0f). To make a white background, you would set all the colors as high as possible (1.0f). To make a black background you would set all the colors to as low as possible (0.0f).
    glClearColor(0.0f, 0.0f, 0.0f, 0.0f);					// Black Background
The next three lines have to do with the Depth Buffer. Think of the depth buffer as layers into the screen. The depth buffer keeps track of how deep objects are into the screen. We won't really be using the depth buffer in this program, but just about every OpenGL program that draws on the screen in 3D will use the depth buffer. It sorts out which object to draw first so that a square you drew behind a circle doesn't end up on top of the circle. The depth buffer is a very important part of OpenGL.
    glClearDepth(1.0f);							// Depth Buffer Setup
    glEnable(GL_DEPTH_TEST);						// Enables Depth Testing
    glDepthFunc(GL_LEQUAL);							// The Type Of Depth Test To Do
Next we tell OpenGL we want the best perspective correction to be done. This causes a very tiny performance hit, but makes the perspective view look a bit better.
    glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);			// Really Nice Perspective Calculations
Finally we return TRUE. If we wanted to see if initialization went ok, we could check to see if TRUE or FALSE was returned. You can add code of your own to return FALSE if an error happens. For now we won't worry about it.
    return TRUE;								// Initialization Went OK
}
This section is where all of your drawing code will go. Anything you plan to display on the screen will go in this section of code. Each tutorial after this one will add code to this section of the program. If you already have an understanding of OpenGL, you can try creating basic shapes by adding OpenGL code below glLoadIdentity() and before return TRUE. If you're new to OpenGL, wait for my next tutorial. For now all we will do is clear the screen to the color we previously decided on, clear the depth buffer and reset the scene. We wont draw anything yet.

The return TRUE tells our program that there were no problems. If you wanted the program to stop for some reason, adding a return FALSE line somewhere before return TRUE will tell our program that the drawing code failed. The program will then quit.
int DrawGLScene(GLvoid)								// Here's Where We Do All The Drawing
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);			// Clear The Screen And The Depth Buffer
    glLoadIdentity();							// Reset The Current Modelview Matrix
    return TRUE;								// Everything Went OK
}
The next section of code is called just before the program quits. The job of KillGLWindow() is to release the Rendering Context, the Device Context and finally the Window Handle. I've added a lot of error checking. If the program is unable to destroy any part of the Window, a message box with an error message will pop up, telling you what failed. Making it a lot easier to find problems in your code.
GLvoid KillGLWindow(GLvoid)							// Properly Kill The Window
{
The first thing we do in KillGLWindow() is check to see if we are in fullscreen mode. If we are, we'll switch back to the desktop. We should destroy the Window before disabling fullscreen mode, but on some video cards if we destroy the Window BEFORE we disable fullscreen mode, the desktop will become corrupt. So we'll disable fullscreen mode first. This will prevent the desktop from becoming corrupt, and works well on both Nvidia and 3dfx video cards!
    if (fullscreen)								// Are We In Fullscreen Mode?
    {
We use ChangeDisplaySettings(NULL,0) to return us to our original desktop. Passing NULL as the first parameter and 0 as the second parameter forces Windows to use the values currently stored in the Windows registry (the default resolution, bit depth, frequency, etc) effectively restoring our original desktop. After we've switched back to the desktop we make the cursor visible again.
        ChangeDisplaySettings(NULL,0);					// If So Switch Back To The Desktop
        ShowCursor(TRUE);						// Show Mouse Pointer
    }
The code below checks to see if we have a Rendering Context (hRC). If we don't, the program will jump to the section of code below that checks to see if we have a Device Context.
    if (hRC)								// Do We Have A Rendering Context?
    {
If we have a Rendering Context, the code below will check to see if we are able to release it (detach the hRC from the hDC). Notice the way I'm checking for errors. I'm basically telling our program to try freeing it (with wglMakeCurrent(NULL,NULL), then I check to see if freeing it was successful or not. Nicely combining a few lines of code into one line.
        if (!wglMakeCurrent(NULL,NULL))					// Are We Able To Release The DC And RC Contexts?
        {
If we were unable to release the DC and RC contexts, MessageBox() will pop up an error message letting us know the DC and RC could not be released. NULL means the message box has no parent Window. The text right after NULL is the text that appears in the message box. "SHUTDOWN ERROR" is the text that appears at the top of the message box (title). Next we have MB_OK, this means we want a message box with one button labelled "OK". MB_ICONINFORMATION makes a lower case i in a circle appear inside the message box (makes it stand out a bit more).
            MessageBox(NULL,"Release Of DC And RC Failed.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        }
Next we try to delete the Rendering Context. If we were unsuccessful an error message will pop up.
        if (!wglDeleteContext(hRC))					// Are We Able To Delete The RC?
        {
If we were unable to delete the Rendering Context the code below will pop up a message box letting us know that deleting the RC was unsuccessful. hRC will be set to NULL.
            MessageBox(NULL,"Release Rendering Context Failed.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        }
        hRC=NULL;							// Set RC To NULL
    }
Now we check to see if our program has a Device Context and if it does, we try to release it. If we're unable to release the Device Context an error message will pop up and hDC will be set to NULL.
    if (hDC && !ReleaseDC(hWnd,hDC))					// Are We Able To Release The DC
    {
        MessageBox(NULL,"Release Device Context Failed.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        hDC=NULL;							// Set DC To NULL
    }
Now we check to see if there is a Window Handle and if there is, we try to destroy the Window using DestroyWindow(hWnd). If we are unable to destroy the Window, an error message will pop up and hWnd will be set to NULL.
    if (hWnd && !DestroyWindow(hWnd))					// Are We Able To Destroy The Window?
    {
        MessageBox(NULL,"Could Not Release hWnd.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        hWnd=NULL;							// Set hWnd To NULL
    }
Last thing to do is unregister our Windows Class. This allows us to properly kill the window, and then reopen another window without receiving the error message "Windows Class already registered".
    if (!UnregisterClass("OpenGL",hInstance))			// Are We Able To Unregister Class
    {
        MessageBox(NULL,"Could Not Unregister Class.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        hInstance=NULL;									// Set hInstance To NULL
    }
}
The next section of code creates our OpenGL Window. I spent a lot of time trying to decide if I should create a fixed fullscreen Window that doesn't require a lot of extra code, or an easy to customize user friendly Window that requires a lot more code. I decided the user friendly Window with a lot more code would be the best choice. I get asked the following questions all the time in email: How can I create a Window instead of using fullscreen? How do I change the Window's title? How do I change the resolution or pixel format of the Window? The following code does all of that! Therefore it's better learning material and will make writing OpenGL programs of your own a lot easier!

As you can see the procedure returns BOOL (TRUE or FALSE), it also takes 5 parameters: title of the Window, width of the Window, height of the Window, bits (16/24/32), and finally fullscreenflag TRUE for fullscreen or FALSE for windowed. We return a boolean value that will tell us if the Window was created successfully.
BOOL CreateGLWindow(char* title, int width, int height, int bits, bool fullscreenflag)
{
When we ask Windows to find us a pixel format that matches the one we want, the number of the mode that Windows ends up finding for us will be stored in the variable PixelFormat.
    GLuint		PixelFormat;						// Holds The Results After Searching For A Match
wc will be used to hold our Window Class structure. The Window Class structure holds information about our window. By changing different fields in the Class we can change how the window looks and behaves. Every window belongs to a Window Class. Before you create a window, you MUST register a Class for the window.
    WNDCLASS	wc;							// Windows Class Structure
dwExStyle and dwStyle will store the Extended and normal Window Style Information. I use variables to store the styles so that I can change the styles depending on what type of window I need to create (A popup window for fullscreen or a window with a border for windowed mode)
    DWORD		dwExStyle;						// Window Extended Style
    DWORD		dwStyle;						// Window Style
The following 5 lines of code grab the upper left, and lower right values of a rectangle. We'll use these values to adjust our window so that the area we draw on is the exact resolution we want. Normally if we create a 640x480 window, the borders of the window take up some of our resolution.
    RECT WindowRect;							// Grabs Rectangle Upper Left / Lower Right Values
    WindowRect.left=(long)0;						// Set Left Value To 0
    WindowRect.right=(long)width;						// Set Right Value To Requested Width
    WindowRect.top=(long)0;							// Set Top Value To 0
    WindowRect.bottom=(long)height;						// Set Bottom Value To Requested Height
In the next line of code we make the global variable fullscreen equal fullscreenflag. So if we made our Window fullscreen, the variable fullscreenflag would be TRUE. If we didn't make the variable fullscreen equal fullscreenflag, the variable fullscreen would stay FALSE. If we were killing the window, and the computer was in fullscreen mode, but the variable fullscreen was FALSE instead of TRUE like it should be, the computer wouldn't switch back to the desktop, because it would think it was already showing the desktop. God I hope that makes sense. Basically to sum it up, fullscreen has to equal whatever fullscreenflag equals, otherwise there will be problems.
    fullscreen=fullscreenflag;						// Set The Global Fullscreen Flag
In the next section of code, we grab an instance for our Window, then we define the Window Class.

The style CS_HREDRAW and CS_VREDRAW force the Window to redraw whenever it is resized. CS_OWNDC creates a private DC for the Window. Meaning the DC is not shared across applications. WndProc is the procedure that watches for messages in our program. No extra Window data is used so we zero the two fields. Then we set the instance. Next we set hIcon to NULL meaning we don't want an ICON in the Window, and for a mouse pointer we use the standard arrow. The background color doesn't matter (we set that in GL). We don't want a menu in this Window so we set it to NULL, and the class name can be any name you want. I'll use "OpenGL" for simplicity.
    hInstance		= GetModuleHandle(NULL);			// Grab An Instance For Our Window
    wc.style		= CS_HREDRAW | CS_VREDRAW | CS_OWNDC;		// Redraw On Move, And Own DC For Window
    wc.lpfnWndProc		= (WNDPROC) WndProc;				// WndProc Handles Messages
    wc.cbClsExtra		= 0;						// No Extra Window Data
    wc.cbWndExtra		= 0;						// No Extra Window Data
    wc.hInstance		= hInstance;					// Set The Instance
    wc.hIcon		= LoadIcon(NULL, IDI_WINLOGO);			// Load The Default Icon
    wc.hCursor		= LoadCursor(NULL, IDC_ARROW);			// Load The Arrow Pointer
    wc.hbrBackground	= NULL;						// No Background Required For GL
    wc.lpszMenuName		= NULL;						// We Don't Want A Menu
    wc.lpszClassName	= "OpenGL";					// Set The Class Name
Now we register the Class. If anything goes wrong, an error message will pop up. Clicking on OK in the error box will exit the program.
    if (!RegisterClass(&wc))						// Attempt To Register The Window Class
    {
        MessageBox(NULL,"Failed To Register The Window Class.","ERROR",MB_OK|MB_ICONEXCLAMATION);
        return FALSE;							// Exit And Return FALSE
    }
Now we check to see if the program should run in fullscreen mode or windowed mode. If it should be fullscreen mode, we'll attempt to set fullscreen mode.
    if (fullscreen)								// Attempt Fullscreen Mode?
    {
The next section of code is something people seem to have a lot of problems with... switching to fullscreen mode. There are a few very important things you should keep in mind when switching to full screen mode. Make sure the width and height that you use in fullscreen mode is the same as the width and height you plan to use for your window, and most importantly, set fullscreen mode BEFORE you create your window. In this code, you don't have to worry about the width and height, the fullscreen and the window size are both set to be the size requested.
        DEVMODE dmScreenSettings;					// Device Mode
        memset(&dmScreenSettings,0,sizeof(dmScreenSettings));		// Makes Sure Memory's Cleared
        dmScreenSettings.dmSize=sizeof(dmScreenSettings);		// Size Of The Devmode Structure
        dmScreenSettings.dmPelsWidth	= width;			// Selected Screen Width
        dmScreenSettings.dmPelsHeight	= height;			// Selected Screen Height
        dmScreenSettings.dmBitsPerPel	= bits;				// Selected Bits Per Pixel
        dmScreenSettings.dmFields=DM_BITSPERPEL|DM_PELSWIDTH|DM_PELSHEIGHT;
In the code above we clear room to store our video settings. We set the width, height and bits that we want the screen to switch to. In the code below we try to set the requested full screen mode. We stored all the information about the width, height and bits in dmScreenSettings. In the line below ChangeDisplaySettings tries to switch to a mode that matches what we stored in dmScreenSettings. I use the parameter CDS_FULLSCREEN when switching modes, because it's supposed to remove the start bar at the bottom of the screen, plus it doesn't move or resize the windows on your desktop when you switch to fullscreen mode and back.
        // Try To Set Selected Mode And Get Results.  NOTE: CDS_FULLSCREEN Gets Rid Of Start Bar.
        if (ChangeDisplaySettings(&dmScreenSettings,CDS_FULLSCREEN)!=DISP_CHANGE_SUCCESSFUL)
        {
If the mode couldn't be set the code below will run. If a matching fullscreen mode doesn't exist, a messagebox will pop up offering two options... The option to run in a window or the option to quit.
            // If The Mode Fails, Offer Two Options.  Quit Or Run In A Window.
            if (MessageBox(NULL,"The Requested Fullscreen Mode Is Not Supported By\nYour Video Card. Use Windowed Mode Instead?","NeHe GL",MB_YESNO|MB_ICONEXCLAMATION)==IDYES)
            {
If the user decided to use windowed mode, the variable fullscreen becomes FALSE, and the program continues running.
                fullscreen=FALSE;				// Select Windowed Mode (Fullscreen=FALSE)
            }
            else
            {
If the user decided to quit, a messagebox will pop up telling the user that the program is about to close. FALSE will be returned telling our program that the window was not created successfully. The program will then quit.
                // Pop Up A Message Box Letting User Know The Program Is Closing.
                MessageBox(NULL,"Program Will Now Close.","ERROR",MB_OK|MB_ICONSTOP);
                return FALSE;					// Exit And Return FALSE
            }
        }
    }
Because the fullscreen code above may have failed and the user may have decided to run the program in a window instead, we check once again to see if fullscreen is TRUE or FALSE before we set up the screen / window type.
    if (fullscreen)								// Are We Still In Fullscreen Mode?
    {
If we are still in fullscreen mode we'll set the extended style to WS_EX_APPWINDOW, which force a top level window down to the taskbar once our window is visible. For the window style we'll create a WS_POPUP window. This type of window has no border around it, making it perfect for fullscreen mode.

Finally, we disable the mouse pointer. If your program is not interactive, it's usually nice to disable the mouse pointer when in fullscreen mode. It's up to you though.
        dwExStyle=WS_EX_APPWINDOW;					// Window Extended Style
        dwStyle=WS_POPUP;						// Windows Style
        ShowCursor(FALSE);						// Hide Mouse Pointer
    }
    else
    {
If we're using a window instead of fullscreen mode, we'll add WS_EX_WINDOWEDGE to the extended style. This gives the window a more 3D look. For style we'll use WS_OVERLAPPEDWINDOW instead of WS_POPUP. WS_OVERLAPPEDWINDOW creates a window with a title bar, sizing border, window menu, and minimize / maximize buttons.
        dwExStyle=WS_EX_APPWINDOW | WS_EX_WINDOWEDGE;			// Window Extended Style
        dwStyle=WS_OVERLAPPEDWINDOW;					// Windows Style
    }
The line below adjust our window depending on what style of window we are creating. The adjustment will make our window exactly the resolution we request. Normally the borders will overlap parts of our window. By using the AdjustWindowRectEx command none of our OpenGL scene will be covered up by the borders, instead, the window will be made larger to account for the pixels needed to draw the window border. In fullscreen mode, this command has no effect.
    AdjustWindowRectEx(&WindowRect, dwStyle, FALSE, dwExStyle);		// Adjust Window To True Requested Size
In the next section of code, we're going to create our window and check to see if it was created properly. We pass CreateWindowEx() all the parameters it requires. The extended style we decided to use. The class name (which has to be the same as the name you used when you registered the Window Class). The window title. The window style. The top left position of your window (0,0 is a safe bet). The width and height of the window. We don't want a parent window, and we don't want a menu so we set both these parameters to NULL. We pass our window instance, and finally we NULL the last parameter.

Notice we include the styles WS_CLIPSIBLINGS and WS_CLIPCHILDREN along with the style of window we've decided to use. WS_CLIPSIBLINGS and WS_CLIPCHILDREN are both REQUIRED for OpenGL to work properly. These styles prevent other windows from drawing over or into our OpenGL Window.
    if (!(hWnd=CreateWindowEx(	dwExStyle,				// Extended Style For The Window
                    "OpenGL",				// Class Name
                    title,					// Window Title
                    WS_CLIPSIBLINGS |			// Required Window Style
                    WS_CLIPCHILDREN |			// Required Window Style
                    dwStyle,				// Selected Window Style
                    0, 0,					// Window Position
                    WindowRect.right-WindowRect.left,	// Calculate Adjusted Window Width
                    WindowRect.bottom-WindowRect.top,	// Calculate Adjusted Window Height
                    NULL,					// No Parent Window
                    NULL,					// No Menu
                    hInstance,				// Instance
                    NULL)))					// Don't Pass Anything To WM_CREATE
Next we check to see if our window was created properly. If our window was created, hWnd will hold the window handle. If the window wasn't created the code below will pop up an error message and the program will quit.
    {
        KillGLWindow();							// Reset The Display
        MessageBox(NULL,"Window Creation Error.","ERROR",MB_OK|MB_ICONEXCLAMATION);
        return FALSE;							// Return FALSE
    }
The next section of code describes a Pixel Format. We choose a format that supports OpenGL and double buffering, along with RGBA (red, green, blue, alpha channel). We try to find a pixel format that matches the bits we decided on (16bit,24bit,32bit). Finally we set up a 16bit Z-Buffer. The remaining parameters are either not used or are not important (aside from the stencil buffer and the (slow) accumulation buffer).
    static	PIXELFORMATDESCRIPTOR pfd=					// pfd Tells Windows How We Want Things To Be
    {
        sizeof(PIXELFORMATDESCRIPTOR),					// Size Of This Pixel Format Descriptor
        1,								// Version Number
        PFD_DRAW_TO_WINDOW |						// Format Must Support Window
        PFD_SUPPORT_OPENGL |						// Format Must Support OpenGL
        PFD_DOUBLEBUFFER,						// Must Support Double Buffering
        PFD_TYPE_RGBA,							// Request An RGBA Format
        bits,								// Select Our Color Depth
        0, 0, 0, 0, 0, 0,						// Color Bits Ignored
        0,								// No Alpha Buffer
        0,								// Shift Bit Ignored
        0,								// No Accumulation Buffer
        0, 0, 0, 0,							// Accumulation Bits Ignored
        16,								// 16Bit Z-Buffer (Depth Buffer)
        0,								// No Stencil Buffer
        0,								// No Auxiliary Buffer
        PFD_MAIN_PLANE,							// Main Drawing Layer
        0,								// Reserved
        0, 0, 0								// Layer Masks Ignored
    };
If there were no errors while creating the window, we'll attempt to get an OpenGL Device Context. If we can't get a DC an error message will pop onto the screen, and the program will quit (return FALSE).
    if (!(hDC=GetDC(hWnd)))							// Did We Get A Device Context?
    {
        KillGLWindow();							// Reset The Display
        MessageBox(NULL,"Can't Create A GL Device Context.","ERROR",MB_OK|MB_ICONEXCLAMATION);
        return FALSE;							// Return FALSE
    }
If we managed to get a Device Context for our OpenGL window we'll try to find a pixel format that matches the one we described above. If Windows can't find a matching pixel format, an error message will pop onto the screen and the program will quit (return FALSE).
    if (!(PixelFormat=ChoosePixelFormat(hDC,&pfd)))				// Did Windows Find A Matching Pixel Format?
    {
        KillGLWindow();							// Reset The Display
        MessageBox(NULL,"Can't Find A Suitable PixelFormat.","ERROR",MB_OK|MB_ICONEXCLAMATION);
        return FALSE;							// Return FALSE
    }
If windows found a matching pixel format we'll try setting the pixel format. If the pixel format cannot be set, an error message will pop up on the screen and the program will quit (return FALSE).
    if(!SetPixelFormat(hDC,PixelFormat,&pfd))				// Are We Able To Set The Pixel Format?
    {
        KillGLWindow();							// Reset The Display
        MessageBox(NULL,"Can't Set The PixelFormat.","ERROR",MB_OK|MB_ICONEXCLAMATION);
        return FALSE;							// Return FALSE
    }
If the pixel format was set properly we'll try to get a Rendering Context. If we can't get a Rendering Context an error message will be displayed on the screen and the program will quit (return FALSE).
    if (!(hRC=wglCreateContext(hDC)))					// Are We Able To Get A Rendering Context?
    {
        KillGLWindow();							// Reset The Display
        MessageBox(NULL,"Can't Create A GL Rendering Context.","ERROR",MB_OK|MB_ICONEXCLAMATION);
        return FALSE;							// Return FALSE
    }
If there have been no errors so far, and we've managed to create both a Device Context and a Rendering Context all we have to do now is make the Rendering Context active. If we can't make the Rendering Context active an error message will pop up on the screen and the program will quit (return FALSE).
    if(!wglMakeCurrent(hDC,hRC))						// Try To Activate The Rendering Context
    {
        KillGLWindow();							// Reset The Display
        MessageBox(NULL,"Can't Activate The GL Rendering Context.","ERROR",MB_OK|MB_ICONEXCLAMATION);
        return FALSE;							// Return FALSE
    }
If everything went smoothly, and our OpenGL window was created we'll show the window, set it to be the foreground window (giving it more priority) and then set the focus to that window. Then we'll call ReSizeGLScene passing the screen width and height to set up our perspective OpenGL screen.
    ShowWindow(hWnd,SW_SHOW);						// Show The Window
    SetForegroundWindow(hWnd);						// Slightly Higher Priority
    SetFocus(hWnd);								// Sets Keyboard Focus To The Window
    ReSizeGLScene(width, height);						// Set Up Our Perspective GL Screen
Finally we jump to InitGL() where we can set up lighting, textures, and anything else that needs to be setup. You can do your own error checking in InitGL(), and pass back TRUE (everythings OK) or FALSE (somethings not right). For example, if you were loading textures in InitGL() and had an error, you may want the program to stop. If you send back FALSE from InitGL() the lines of code below will see the FALSE as an error message and the program will quit.
    if (!InitGL())								// Initialize Our Newly Created GL Window
    {
        KillGLWindow();							// Reset The Display
        MessageBox(NULL,"Initialization Failed.","ERROR",MB_OK|MB_ICONEXCLAMATION);
        return FALSE;							// Return FALSE
    }
If we've made it this far, it's safe to assume the window creation was successful. We return TRUE to WinMain() telling WinMain() there were no errors. This prevents the program from quitting.
    return TRUE;								// Success
}
This is where all the window messages are dealt with. When we registred the Window Class we told it to jump to this section of code to deal with window messages.
LRESULT CALLBACK WndProc(	HWND	hWnd,					// Handle For This Window
                UINT	uMsg,					// Message For This Window
                WPARAM	wParam,					// Additional Message Information
                LPARAM	lParam)					// Additional Message Information
{
The code below sets uMsg as the value that all the case statements will be compared to. uMsg will hold the name of the message we want to deal with.
    switch (uMsg)								// Check For Windows Messages
    {
if uMsg is WM_ACTIVE we check to see if our window is still active. If our window has been minimized the variable active will be FALSE. If our window is active, the variable active will be TRUE.
        case WM_ACTIVATE:						// Watch For Window Activate Message
        {
            if (!HIWORD(wParam))					// Check Minimization State
            {
                active=TRUE;					// Program Is Active
            }
            else
            {
                active=FALSE;					// Program Is No Longer Active
            }

            return 0;						// Return To The Message Loop
        }
If the message is WM_SYSCOMMAND (system command) we'll compare wParam against the case statements. If wParam is SC_SCREENSAVE or SC_MONITORPOWER either a screensaver is trying to start or the monitor is trying to enter power saving mode. By returning 0 we prevent both those things from happening.
        case WM_SYSCOMMAND:						// Intercept System Commands
        {
            switch (wParam)						// Check System Calls
            {
                case SC_SCREENSAVE:				// Screensaver Trying To Start?
                case SC_MONITORPOWER:				// Monitor Trying To Enter Powersave?
                return 0;					// Prevent From Happening
            }
            break;							// Exit
        }
If uMsg is WM_CLOSE the window has been closed. We send out a quit message that the main loop will intercept. The variable done will be set to TRUE, the main loop in WinMain() will stop, and the program will close.
        case WM_CLOSE:							// Did We Receive A Close Message?
        {
            PostQuitMessage(0);					// Send A Quit Message
            return 0;						// Jump Back
        }
If a key is being held down we can find out what key it is by reading wParam. I then make that keys cell in the array keys[] become TRUE. That way I can read the array later on and find out which keys are being held down. This allows more than one key to be pressed at the same time.
        case WM_KEYDOWN:						// Is A Key Being Held Down?
        {
            keys[wParam] = TRUE;					// If So, Mark It As TRUE
            return 0;						// Jump Back
        }
If a key has been released we find out which key it was by reading wParam. We then make that keys cell in the array keys[] equal FALSE. That way when I read the cell for that key I'll know if it's still being held down or if it's been released. Each key on the keyboard can be represented by a number from 0-255. When I press the key that represents the number 40 for example, keys[40] will become TRUE. When I let go, it will become FALSE. This is how we use cells to store keypresses.
        case WM_KEYUP:							// Has A Key Been Released?
        {
            keys[wParam] = FALSE;					// If So, Mark It As FALSE
            return 0;						// Jump Back
        }
Whenever we resize our window uMsg will eventually become the message WM_SIZE. We read the LOWORD and HIWORD values of lParam to find out the windows new width and height. We pass the new width and height to ReSizeGLScene(). The OpenGL Scene is then resized to the new width and height.
        case WM_SIZE:							// Resize The OpenGL Window
        {
            ReSizeGLScene(LOWORD(lParam),HIWORD(lParam));		// LoWord=Width, HiWord=Height
            return 0;						// Jump Back
        }
    }
Any messages that we don't care about will be passed to DefWindowProc so that Windows can deal with them.
    // Pass All Unhandled Messages To DefWindowProc
    return DefWindowProc(hWnd,uMsg,wParam,lParam);
}
This is the entry point of our Windows Application. This is where we call our window creation routine, deal with window messages, and watch for human interaction.
int WINAPI WinMain(	HINSTANCE	hInstance,				// Instance
            HINSTANCE	hPrevInstance,				// Previous Instance
            LPSTR		lpCmdLine,				// Command Line Parameters
            int		nCmdShow)				// Window Show State
{
We set up two variables. msg will be used to check if there are any waiting messages that need to be dealt with. the variable done starts out being FALSE. This means our program is not done running. As long as done remains FALSE, the program will continue to run. As soon as done is changed from FALSE to TRUE, our program will quit.
    MSG	msg;								// Windows Message Structure
    BOOL	done=FALSE;							// Bool Variable To Exit Loop
This section of code is completely optional. It pops up a messagebox that asks if you would like to run the program in fullscreen mode. If the user clicks on the NO button, the variable fullscreen changes from TRUE (it's default) to FALSE and the program runs in windowed mode instead of fullscreen mode.
    // Ask The User Which Screen Mode They Prefer
    if (MessageBox(NULL,"Would You Like To Run In Fullscreen Mode?", "Start FullScreen?",MB_YESNO|MB_ICONQUESTION)==IDNO)
    {
        fullscreen=FALSE;						// Windowed Mode
    }
This is how we create our OpenGL window. We pass the title, the width, the height, the color depth, and TRUE (fullscreen) or FALSE (window mode) to CreateGLWindow. That's it! I'm pretty happy with the simplicity of this code. If the window was not created for some reason, FALSE will be returned and our program will immediately quit (return 0).
    // Create Our OpenGL Window
    if (!CreateGLWindow("NeHe's OpenGL Framework",640,480,16,fullscreen))
    {
        return 0;							// Quit If Window Was Not Created
    }
This is the start of our loop. As long as done equals FALSE the loop will keep repeating.
    while(!done)								// Loop That Runs Until done=TRUE
    {
The first thing we have to do is check to see if any window messages are waiting. By using PeekMessage() we can check for messages without halting our program. A lot of programs use GetMessage(). It works fine, but with GetMessage() your program doesn't do anything until it receives a paint message or some other window message.
        if (PeekMessage(&msg,NULL,0,0,PM_REMOVE))			// Is There A Message Waiting?
        {
In the next section of code we check to see if a quit message was issued. If the current message is a WM_QUIT message caused by PostQuitMessage(0) the variable done is set to TRUE, causing the program to quit.
            if (msg.message==WM_QUIT)				// Have We Received A Quit Message?
            {
                done=TRUE;					// If So done=TRUE
            }
            else							// If Not, Deal With Window Messages
            {
If the message isn't a quit message we translate the message then dispatch the message so that WndProc() or Windows can deal with it.
                TranslateMessage(&msg);				// Translate The Message
                DispatchMessage(&msg);				// Dispatch The Message
            }
        }
        else								// If There Are No Messages
        {
If there were no messages we'll draw our OpenGL scene. The first line of code below checks to see if the window is active. The scene is rendered and the returned value is checked. If DrawGLScene() returns FALSE or the ESC key is pressed the variable done is set to TRUE, causing the program to quit.
            // Draw The Scene.  Watch For ESC Key And Quit Messages From DrawGLScene()
            if ((active && !DrawGLScene()) || keys[VK_ESCAPE])	// Updating View Only If Active
            {
                done=TRUE;					// ESC or DrawGLScene Signalled A Quit
            }
            else							// Not Time To Quit, Update Screen
            {
If everything rendered fine, we swap the buffer (By using double buffering we get smooth flicker free animation). By using double buffering, we are drawing everything to a hidden screen that we can not see. When we swap the buffer, the screen we see becomes the hidden screen, and the screen that was hidden becomes visible. This way we don't see our scene being drawn out. It just instantly appears.
                SwapBuffers(hDC);				// Swap Buffers (Double Buffering)
            }
The next bit of code is new and has been added just recently (05-01-00). It allows us to press the F1 key to switch from fullscreen mode to windowed mode or windowed mode to fullscreen mode.
            if (keys[VK_F1])					// Is F1 Being Pressed?
            {
                keys[VK_F1]=FALSE;				// If So Make Key FALSE
                KillGLWindow();					// Kill Our Current Window
                fullscreen=!fullscreen;				// Toggle Fullscreen / Windowed Mode
                // Recreate Our OpenGL Window
                if (!CreateGLWindow("NeHe's OpenGL Framework",640,480,16,fullscreen))
                {
                    return 0;				// Quit If Window Was Not Created
                }
            }
        }
    }
If the done variable is no longer FALSE, the program quits. We kill the OpenGL window properly so that everything is freed up, and we exit the program.
    // Shutdown
    KillGLWindow();								// Kill The Window
    return (msg.wParam);							// Exit The Program
}
In this tutorial I have tried to explain in as much detail, every step involved in setting up, and creating a fullscreen OpenGL program of your own, that will exit when the ESC key is pressed and monitor if the window is active or not. I've spent roughly 2 weeks writing the code, one week fixing bugs & talking with programming gurus, and 2 days (roughly 22 hours writing this HTML file). If you have comments or questions please email me. If you feel I have incorrectly commented something or that the code could be done better in some sections, please let me know. I want to make the best OpenGL tutorials I can and I'm interested in hearing your feedback.

Jeff Molofee (NeHe)


Lesson 02 - Your First Polygon

Lesson 2
In the first tutorial I taught you how to create an OpenGL Window. In this tutorial I will teach you how to create both Triangles and Quads. We will create a triangle using GL_TRIANGLES, and a square using GL_QUADS.

Using the code from the first tutorial, we will be adding to the DrawGLScene() procedure. I will rewrite the entire procedure below. If you plan to modify the last lesson, you can replace the DrawGLScene() procedure with the code below, or just add the lines of code below that do not exist in the last tutorial.
int DrawGLScene(GLvoid)							// Here's Where We Do All The Drawing
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);		// Clear The Screen And The Depth Buffer
    glLoadIdentity();						// Reset The View
When you do a glLoadIdentity() what you are doing is moving back to the center of the screen with the X axis running left to right, the Y axis moving up and down, and the Z axis moving into, and out of the screen. The center of an OpenGL screen is 0.0f on the X and Y axis. To the left of center would be a negative number. To the right would be a positive number. Moving towards the top of the screen would be a positive number, moving to the bottom of the screen would be a negative number. Moving deeper into the screen is a negative number, moving towards the viewer would be a positive number.

glTranslatef(x, y, z) moves along the X, Y and Z axis, in that order. The line of code below moves left on the X axis 1.5 units. It does not move on the Y axis at all (0.0), and it moves into the screen 6.0 units. When you translate, you are not moving a set amount from the center of the screen, you are moving a set amount from wherever you currently were on the screen.
    glTranslatef(-1.5f,0.0f,-6.0f);					// Move Left 1.5 Units And Into The Screen 6.0
Now that we have moved to the left half of the screen, and we've set the view deep enough into the screen (6.0) that we can see our entire scene we will create the Triangle. glBegin(GL_TRIANGLES) means we want to start drawing a triangle, and glEnd() tells OpenGL we are done creating the triangle. Typically if you want 3 points, use GL_TRIANGLES. Drawing triangles is fairly fast on most video cards. If you want 4 points use GL_QUADS to make life easier. From what I've heard, most video cards just draw to triangles anyways. Finally if you want more than 4 points, use GL_POLYGON.

In our simple program, we draw just one triangle. If we wanted to draw a second triangle, we could include another 3 lines of code (3 points) right after the first three. All six lines of code would be between glBegin(GL_TRIANGLES) and glEnd(). There's no point in putting a glBegin(GL_TRIANGLES) and a glEnd() around every group of 3 points if we're drawing all triangles. This applies to quads as well. If you know you're drawing all quads, you can include the second four lines of code right after the first four lines. A polygon on the other hand (GL_POLYGON) can be made up of any amount of point so it doesn't matter how many lines you have between glBegin(GL_POLYGON) and glEnd().

The first line after glBegin, sets the first point of our polygon. The first number of glVertex is for the X axis, the second number is for the Y axis, and the third number is for the Z axis. So in the first line, we don't move on the X axis. We move up one unit on the Y axis, and we don't move on the Z axis. This gives us the top point of the triangle. The second glVertex moves left one unit on the X axis and down one unit on the Y axis. This gives us the bottom left point of the triangle. The third glVertex moves right one unit, and down one unit. This gives us the bottom right point of the triangle. glEnd() tells OpenGL there are no more points. The filled triangle will be displayed.
    glBegin(GL_TRIANGLES);						// Drawing Using Triangles
        glVertex3f( 0.0f, 1.0f, 0.0f);				// Top
        glVertex3f(-1.0f,-1.0f, 0.0f);				// Bottom Left
        glVertex3f( 1.0f,-1.0f, 0.0f);				// Bottom Right
    glEnd();							// Finished Drawing The Triangle
Now that we have the triangle displayed on the left half of the screen, we need to move to the right half of the screen to display the square. In order to do this we use glTranslate again. This time we must move to the right, so X must be a positive value. Because we've already moved left 1.5 units, to get to the center we have to move right 1.5 units. After we reach the center we have to move another 1.5 units to the right of center. So in total we need to move 3.0 units to the right.
    glTranslatef(3.0f,0.0f,0.0f);					// Move Right 3 Units
Now we create the square. We'll do this using GL_QUADS. A quad is basically a 4 sided polygon. Perfect for making a square. The code for creating a square is very similar to the code we used to create a triangle. The only difference is the use of GL_QUADS instead of GL_TRIANGLES, and an extra glVertex3f for the 4th point of the square. We'll draw the square top left, top right, bottom right, bottom left.
    glBegin(GL_QUADS);						// Draw A Quad
        glVertex3f(-1.0f, 1.0f, 0.0f);				// Top Left
        glVertex3f( 1.0f, 1.0f, 0.0f);				// Top Right
        glVertex3f( 1.0f,-1.0f, 0.0f);				// Bottom Right
        glVertex3f(-1.0f,-1.0f, 0.0f);				// Bottom Left
    glEnd();							// Done Drawing The Quad
    return TRUE;							// Keep Going
}
Finally change the code to toggle window / fullscreen mode so that the title at the top of the window is proper.
            if (keys[VK_F1])				// Is F1 Being Pressed?
            {
                keys[VK_F1]=FALSE;			// If So Make Key FALSE
                KillGLWindow();				// Kill Our Current Window
                fullscreen=!fullscreen;			// Toggle Fullscreen / Windowed Mode
                // Recreate Our OpenGL Window ( Modified )
                if (!CreateGLWindow("NeHe's First Polygon Tutorial",640,480,16,fullscreen))
                {
                    return 0;			// Quit If Window Was Not Created
                }
            }
In this tutorial I have tried to explain in as much detail, every step involved in drawing polygons, and quads on the screen using OpenGL. If you have comments or questions please email me. If you feel I have incorrectly commented something or that the code could be done better in some sections, please let me know. I want to make the best OpenGL tutorials I can. I'm interested in hearing your feedback.


Lesson 03 - Colors

Lesson 3
In the last tutorial I taught you how to display Triangles and Quads on the screen. In this tutorial I will teach you how to add 2 different types of coloring to the triangle and quad. Flat coloring will make the quad one solid color. Smooth coloring will blend the 3 colors specified at each point (vertex) of the triangle together, creating a nice blend of colors.

Using the code from the last tutorial, we will be adding to the DrawGLScene procedure. I will rewrite the entire procedure below, so if you plan to modify the last lesson, you can replace the DrawGLScene procedure with the code below, or just add code to the DrawGLScene procedure that is not already in the last tutorial.
int DrawGLScene(GLvoid)						// Here's Where We Do All The Drawing
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);	// Clear The Screen And The Depth Buffer
    glLoadIdentity();					// Reset The Current Modelview Matrix

    glTranslatef(-1.5f,0.0f,-6.0f);				// Left 1.5 Then Into Screen Six Units

    glBegin(GL_TRIANGLES);					// Begin Drawing Triangles
If you remember from the last tutorial, this is the section of code to draw the triangle on the left half of the screen. The next line of code will be the first time we use the command glColor3f(r,g,b). The three parameters in the brackets are red, green and blue intensity values. The values can be from 0.0f to 1.0f. It works the same way as the color values we use to clear the background of the screen.

We are setting the color to red (full red intensity, no green, no blue). The line of code right after that is the first vertex (the top of the triangle), and will be drawn using the current color which is red. Anything we draw from now on will be red until we change the color to something other than red.
        glColor3f(1.0f,0.0f,0.0f);			// Set The Color To Red
        glVertex3f( 0.0f, 1.0f, 0.0f);			// Move Up One Unit From Center (Top Point)
We've placed the first vertex on the screen, setting it's color to red. Now before we place the second vertex we'll change the color to green. That way the second vertex which is the left corner of the triangle will be set to green.
        glColor3f(0.0f,1.0f,0.0f);			// Set The Color To Green
        glVertex3f(-1.0f,-1.0f, 0.0f);			// Left And Down One Unit (Bottom Left)
Now we're on the third and final vertex. Just before we draw it, we set the color to blue. This will be the right corner of the triangle. As soon as the glEnd() command is issued, the polygon will be filled in. But because it has a different color at each vertex, rather than one solid color throughout, the color will spread out from each corner, eventually meeting in the middle, where the colors will blend together. This is smooth coloring.
        glColor3f(0.0f,0.0f,1.0f);			// Set The Color To Blue
        glVertex3f( 1.0f,-1.0f, 0.0f);			// Right And Down One Unit (Bottom Right)
    glEnd();						// Done Drawing A Triangle

    glTranslatef(3.0f,0.0f,0.0f);				// From Right Point Move 3 Units Right
Now we will draw a solid blue colored square. It's important to remember that anything drawn after the color has been set will be drawn in that color. Every project you create down the road will use coloring in one way or another. Even in scenes where everything is texture mapped, glColor3f can still be used to tint the color of textures, etc. More on that later.

So to draw our square all one color, all we have to do is set the color once to a color we like (blue in this example), then draw the square. The color blue will be used for each vertex because we're not telling OpenGL to change the color at each vertex. The final result... a blue square.
    glColor3f(0.5f,0.5f,1.0f);				// Set The Color To Blue One Time Only
    glBegin(GL_QUADS);					// Start Drawing Quads
        glVertex3f(-1.0f, 1.0f, 0.0f);			// Left And Up 1 Unit (Top Left)
        glVertex3f( 1.0f, 1.0f, 0.0f);			// Right And Up 1 Unit (Top Right)
        glVertex3f( 1.0f,-1.0f, 0.0f);			// Left And Up One Unit (Bottom Right)
        glVertex3f(-1.0f,-1.0f, 0.0f);			// Left And Up One Unit (Bottom Left)
    glEnd();						// Done Drawing A Quad
    return TRUE;						// Keep Going
}
Finally change the code to toggle window / fullscreen mode so that the title at the top of the window is proper.
            if (keys[VK_F1])			// Is F1 Being Pressed?
            {
                keys[VK_F1]=FALSE;		// If So Make Key FALSE
                KillGLWindow();			// Kill Our Current Window
                fullscreen=!fullscreen;		// Toggle Fullscreen / Windowed Mode
                // Recreate Our OpenGL Window ( Modified )
                if (!CreateGLWindow("NeHe's Color Tutorial",640,480,16,fullscreen))
                {
                    return 0;		// Quit If Window Was Not Created
                }
            }
In this tutorial I have tried to explain in as much detail, how to add flat and smooth coloring to your OpenGL polygons. Play around with the code, try changing the red, green and blue values to different numbers. See what colors you can come up with. If you have comments or questions please email me. If you feel I have incorrectly commented something or that the code could be done better in some sections, please let me know. I want to make the best OpenGL tutorials I can. I'm interested in hearing your feedback.


Lesson 04 - Rotation

Lesson 4
In the last tutorial I taught you how to add color to triangles and quads. In this tutorial I will teach you how to rotate these colored objects around an axis.

Using the code from the last tutorial, we will be adding to a few places in the code. I will rewrite the entire section of code below so it's easy for you to figure out what's been added, and what needs to be replaced.

We'll start off by adding the two variables to keep track of the rotation for each object. We do this right at the beginning of the program. You'll notice below I've added two lines after BOOL keys[256]. These lines set up two floating point variables that we can use to spin the objects with very fine accuracy. Floating point allows decimal numbers. Meaning we're not stuck using 1, 2, 3 for the angle, we can use 1.1, 1.7, 2.3, or even 1.015 for fine accuracy. You'll find that floating point numbers are essential to OpenGL programming.
#include <windows.h>						// Header File For Windows
#include <gl\gl.h>						// Header File For The OpenGL32 Library
#include <gl\glu.h>						// Header File For The GLu32 Library
#include <gl\glaux.h>						// Header File For The GLaux Library

HDC	hDC=NULL;						// Private GDI Device Context
HGLRC	hRC=NULL;						// Permanent Rendering Context
HWND	hWnd=NULL;						// Holds Our Window Handle

bool	keys[256];						// Array Used For The Keyboard Routine
bool	active=TRUE;						// Window Active Flag
bool	fullscreen=TRUE;					// Fullscreen Flag Set To TRUE By Default

GLfloat	rtri;							// Angle For The Triangle ( NEW )
GLfloat	rquad;							// Angle For The Quad     ( NEW )
Now we need to modify the DrawGLScene() code. I will rewrite the entire procedure. This should make it easier for you to see what changes I have made to the original code. I'll explain why lines have been modified, and what exactly it is that the new lines do. The next section of code is exactly the same as in the last tutorial.
int DrawGLScene(GLvoid)						// Here's Where We Do All The Drawing
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);	// Clear The Screen And The Depth Buffer
    glLoadIdentity();					// Reset The View
    glTranslatef(-1.5f,0.0f,-6.0f);				// Move Into The Screen And Left
The next line of code is new. glRotatef(Angle,Xvector,Yvector,Zvector) is responsible for rotating the object around an axis. You will get alot of use out of this command. Angle is some number (usually stored in a variable) that represents how much you would like to spin the object. Xvector, Yvector and Zvector parameters together represent the vector about which the rotation will occur. If you use values (1,0,0), you are describing a vector which travels in a direction of 1 unit along the x axis towards the right. Values (-1,0,0) describes a vector that travels in a direction of 1 unit along the x axis, but this time towards the left.

D. Michael Traub: has supplied the above explanation of the Xvector, Yvector and Zvector parameters.

To better understand X, Y and Z rotation I'll explain using examples...

X Axis - You're working on a table saw. The bar going through the center of the blade runs left to right (just like the x axis in OpenGL). The sharp teeth spin around the x axis (bar running through the center of the blade), and appear to be cutting towards or away from you depending on which way the blade is being spun. When we spin something on the x axis in OpenGL it will spin the same way.

Y Axis - Imagine that you are standing in the middle of a field. There is a huge tornado coming straight at you. The center of a tornado runs from the sky to the ground (up and down, just like the y axis in OpenGL). The dirt and debris in the tornado spins around the y axis (center of the tornado) from left to right or right to left. When you spin something on the y axis in OpenGL it will spin the same way.

Z Axis - You are looking at the front of a fan. The center of the fan points towards you and away from you (just like the z axis in OpenGL). The blades of the fan spin around the z axis (center of the fan) in a clockwise or counterclockwise direction. When You spin something on the z axis in OpenGL it will spin the same way.

So in the following line of code, if rtri was equal to 7, we would spin 7 on the Y axis (left to right). You can try experimenting with the code. Change the 0.0f's to 1.0f's, and the 1.0f to a 0.0f to spin the triangle on the X and Y axes at the same time.
    glRotatef(rtri,0.0f,1.0f,0.0f);				// Rotate The Triangle On The Y axis ( NEW )
The next section of code has not changed. It draws a colorful smooth blended triangle. The triangle will be drawn on the left side of the screen, and will be rotated on it's Y axis causing it to spin left to right.
    glBegin(GL_TRIANGLES);					// Start Drawing A Triangle
        glColor3f(1.0f,0.0f,0.0f);			// Set Top Point Of Triangle To Red
        glVertex3f( 0.0f, 1.0f, 0.0f);			// First Point Of The Triangle
        glColor3f(0.0f,1.0f,0.0f);			// Set Left Point Of Triangle To Green
        glVertex3f(-1.0f,-1.0f, 0.0f);			// Second Point Of The Triangle
        glColor3f(0.0f,0.0f,1.0f);			// Set Right Point Of Triangle To Blue
        glVertex3f( 1.0f,-1.0f, 0.0f);			// Third Point Of The Triangle
    glEnd();						// Done Drawing The Triangle
You'll notice in the code below, that we've added another glLoadIdentity(). We do this to reset the view. If we didn't reset the view. If we translated after the object had been rotated, you would get very unexpected results. Because the axis has been rotated, it may not be pointing in the direction you think. So if we translate left on the X axis, we may end up moving up or down instead, depending on how much we've rotated on each axis. Try taking the glLoadIdentity() line out to see what I mean.

Once the scene has been reset, so X is running left to right, Y up and down, and Z in and out, we translate. You'll notice we're only moving 1.5 to the right instead of 3.0 like we did in the last lesson. When we reset the screen, our focus moves to the center of the screen. meaning we're no longer 1.5 units to the left, we're back at 0.0. So to get to 1.5 on the right side of zero we dont have to move 1.5 from left to center then 1.5 to the right (total of 3.0) we only have to move from center to the right which is just 1.5 units.

After we have moved to our new location on the right side of the screen, we rotate the quad, on the X axis. This will cause the square to spin up and down.
    glLoadIdentity();					// Reset The Current Modelview Matrix
    glTranslatef(1.5f,0.0f,-6.0f);				// Move Right 1.5 Units And Into The Screen 6.0
    glRotatef(rquad,1.0f,0.0f,0.0f);			// Rotate The Quad On The X axis ( NEW )
This section of code remains the same. It draws a blue square made from one quad. It will draw the square on the right side of the screen in it's rotated position.
    glColor3f(0.5f,0.5f,1.0f);				// Set The Color To A Nice Blue Shade
    glBegin(GL_QUADS);					// Start Drawing A Quad
        glVertex3f(-1.0f, 1.0f, 0.0f);			// Top Left Of The Quad
        glVertex3f( 1.0f, 1.0f, 0.0f);			// Top Right Of The Quad
        glVertex3f( 1.0f,-1.0f, 0.0f);			// Bottom Right Of The Quad
        glVertex3f(-1.0f,-1.0f, 0.0f);			// Bottom Left Of The Quad
    glEnd();						// Done Drawing The Quad
The next two lines are new. Think of rtri, and rquad as containers. At the top of our program we made the containers (GLfloat rtri, and GLfloat rquad). When we built the containers they had nothing in them. The first line below ADDS 0.2 to that container. So each time we check the value in the rtri container after this section of code, it will have gone up by 0.2. The rquad container decreases by 0.15. So every time we check the rquad container, it will have gone down by 0.15. Going down will cause the object to spin the opposite direction it would spin if you were going up.

Try chaning the + to a - in the line below see how the object spins the other direction. Try changing the values from 0.2 to 1.0. The higher the number, the faster the object will spin. The lower the number, the slower it will spin.
    rtri+=0.2f;						// Increase The Rotation Variable For The Triangle ( NEW )
    rquad-=0.15f;						// Decrease The Rotation Variable For The Quad     ( NEW )
    return TRUE;						// Keep Going
}
Finally change the code to toggle window / fullscreen mode so that the title at the top of the window is proper.
            if (keys[VK_F1])			// Is F1 Being Pressed?
            {
                keys[VK_F1]=FALSE;		// If So Make Key FALSE
                KillGLWindow();			// Kill Our Current Window
                fullscreen=!fullscreen;		// Toggle Fullscreen / Windowed Mode
                // Recreate Our OpenGL Window ( Modified )
                if (!CreateGLWindow("NeHe's Rotation Tutorial",640,480,16,fullscreen))
                {
                    return 0;		// Quit If Window Was Not Created
                }
            }
In this tutorial I have tried to explain in as much detail as possible, how to rotate objects around an axis. Play around with the code, try spinning the objects, on the Z axis, the X & Y, or all three :) If you have comments or questions please email me. If you feel I have incorrectly commented something or that the code could be done better in some sections, please let me know. I want to make the best OpenGL tutorials I can. I'm interested in hearing your feedback.


Lesson 05 - Solid Objects

Lesson 5
Expanding on the last tutorial, we'll now make the object into TRUE 3D object, rather than 2D objects in a 3D world. We will do this by adding a left, back, and right side to the triangle, and a left, right, back, top and bottom to the square. By doing this, we turn the triangle into a pyramid, and the square into a cube.

We'll blend the colors on the pyramid, creating a smoothly colored object, and for the square we'll color each face a different color.
int DrawGLScene(GLvoid)						// Here's Where We Do All The Drawing
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);	// Clear The Screen And The Depth Buffer
    glLoadIdentity();					// Reset The View
    glTranslatef(-1.5f,0.0f,-6.0f);				// Move Left And Into The Screen

    glRotatef(rtri,0.0f,1.0f,0.0f);				// Rotate The Pyramid On It's Y Axis

    glBegin(GL_TRIANGLES);					// Start Drawing The Pyramid
A few of you have taken the code from the last tutorial, and made 3D objects of your own. One thing I've been asked quite a bit is "how come my objects are not spinning on their axis? It seems like they are spinning all over the screen". In order for your object to spin around an axis, it has to be designed AROUND that axis. You have to remember that the center of any object should be 0 on the X, 0 on the Y, and 0 on the Z.

The following code will create the pyramid around a central axis. The top of the pyramid is one high from the center, the bottom of the pyramid is one down from the center. The top point is right in the middle (zero), and the bottom points are one left from center, and one right from center.

Note that all triangles are drawn in a counterclockwise rotation. This is important, and will be explained in a future tutorial, for now, just know that it's good practice to make objects either clockwise or counterclockwise, but you shouldn't mix the two unless you have a reason to.

We start off by drawing the Front Face. Because all of the faces share the top point, we will make this point red on all of the triangles. The color on the bottom two points of the triangles will alternate. The front face will have a green left point and a blue right point. Then the triangle on the right side will have a blue left point and a green right point. By alternating the bottom two colors on each face, we make a common colored point at the bottom of each face.
        glColor3f(1.0f,0.0f,0.0f);			// Red
        glVertex3f( 0.0f, 1.0f, 0.0f);			// Top Of Triangle (Front)
        glColor3f(0.0f,1.0f,0.0f);			// Green
        glVertex3f(-1.0f,-1.0f, 1.0f);			// Left Of Triangle (Front)
        glColor3f(0.0f,0.0f,1.0f);			// Blue
        glVertex3f( 1.0f,-1.0f, 1.0f);			// Right Of Triangle (Front)
Now we draw the right face. Notice then the two bottom point are drawn one to the right of center, and the top point is drawn one up on the y axis, and right in the middle of the x axis. causing the face to slope from center point at the top out to the right side of the screen at the bottom.

Notice the left point is drawn blue this time. By drawing it blue, it will be the same color as the right bottom corner of the front face. Blending blue outwards from that one corner across both the front and right face of the pyramid.

Notice how the remaining three faces are included inside the same glBegin(GL_TRIANGLES) and glEnd() as the first face. Because we're making this entire object out of triangles, OpenGL will know that every three points we plot are the three points of a triangle. Once it's drawn three points, if there are three more points, it will assume another triangle needs to be drawn. If you were to put four points instead of three, OpenGL would draw the first three and assume the fourth point is the start of a new triangle. It would not draw a Quad. So make sure you don't add any extra points by accident.
        glColor3f(1.0f,0.0f,0.0f);			// Red
        glVertex3f( 0.0f, 1.0f, 0.0f);			// Top Of Triangle (Right)
        glColor3f(0.0f,0.0f,1.0f);			// Blue
        glVertex3f( 1.0f,-1.0f, 1.0f);			// Left Of Triangle (Right)
        glColor3f(0.0f,1.0f,0.0f);			// Green
        glVertex3f( 1.0f,-1.0f, -1.0f);			// Right Of Triangle (Right)
Now for the back face. Again the colors switch. The left point is now green again, because the corner it shares with the right face is green.
        glColor3f(1.0f,0.0f,0.0f);			// Red
        glVertex3f( 0.0f, 1.0f, 0.0f);			// Top Of Triangle (Back)
        glColor3f(0.0f,1.0f,0.0f);			// Green
        glVertex3f( 1.0f,-1.0f, -1.0f);			// Left Of Triangle (Back)
        glColor3f(0.0f,0.0f,1.0f);			// Blue
        glVertex3f(-1.0f,-1.0f, -1.0f);			// Right Of Triangle (Back)
Finally we draw the left face. The colors switch one last time. The left point is blue, and blends with the right point of the back face. The right point is green, and blends with the left point of the front face.

We're done drawing the pyramid. Because the pyramid only spins on the Y axis, we will never see the bottom, so there is no need to put a bottom on the pyramid. If you feel like experimenting, try adding a bottom using a quad, then rotate on the X axis to see if you've done it correctly. Make sure the color used on each corner of the quad matches up with the colors being used at the four corners of the pyramid.
        glColor3f(1.0f,0.0f,0.0f);			// Red
        glVertex3f( 0.0f, 1.0f, 0.0f);			// Top Of Triangle (Left)
        glColor3f(0.0f,0.0f,1.0f);			// Blue
        glVertex3f(-1.0f,-1.0f,-1.0f);			// Left Of Triangle (Left)
        glColor3f(0.0f,1.0f,0.0f);			// Green
        glVertex3f(-1.0f,-1.0f, 1.0f);			// Right Of Triangle (Left)
    glEnd();						// Done Drawing The Pyramid
Now we'll draw the cube. It's made up of six quads. All of the quads are drawn in a counter clockwise order. Meaning the first point is the top right, the second point is the top left, third point is bottom left, and finally bottom right. When we draw the back face, it may seem as though we are drawing clockwise, but you have to keep in mind that if we were behind the cube looking at the front of it, the left side of the screen is actually the right side of the quad, and the right side of the screen would actually be the left side of the quad.

Notice we move the cube a little further into the screen in this lesson. By doing this, the size of the cube appears closer to the size of the pyramid. If you were to move it only 6 units into the screen, the cube would appear much larger than the pyramid, and parts of it might get cut off by the sides of the screen. You can play around with this setting, and see how moving the cube further into the screen makes it appear smaller, and moving it closer makes it appear larger. The reason this happens is perspective. Objects in the distance should appear smaller :)
    glLoadIdentity();
    glTranslatef(1.5f,0.0f,-7.0f);				// Move Right And Into The Screen

    glRotatef(rquad,1.0f,1.0f,1.0f);			// Rotate The Cube On X, Y & Z

    glBegin(GL_QUADS);					// Start Drawing The Cube
We'll start off by drawing the top of the cube. We move up one unit from the center of the cube. Notice that the Y axis is always one. We then draw a quad on the Z plane. Meaning into the screen. We start off by drawing the top right point of the top of the cube. The top right point would be one unit right, and one unit into the screen. The second point would be one unit to the left, and unit into the screen. Now we have to draw the bottom of the quad towards the viewer. so to do this, instead of going into the screen, we move one unit towards the screen. Make sense?
        glColor3f(0.0f,1.0f,0.0f);			// Set The Color To Blue
        glVertex3f( 1.0f, 1.0f,-1.0f);			// Top Right Of The Quad (Top)
        glVertex3f(-1.0f, 1.0f,-1.0f);			// Top Left Of The Quad (Top)
        glVertex3f(-1.0f, 1.0f, 1.0f);			// Bottom Left Of The Quad (Top)
        glVertex3f( 1.0f, 1.0f, 1.0f);			// Bottom Right Of The Quad (Top)
The bottom is drawn the exact same way as the top, but because it's the bottom, it's drawn down one unit from the center of the cube. Notice the Y axis is always minus one. If we were under the cube, looking at the quad that makes the bottom, you would notice the top right corner is the corner closest to the viewer, so instead of drawing in the distance first, we draw closest to the viewer first, then on the left side closest to the viewer, and then we go into the screen to draw the bottom two points.

If you didn't really care about the order the polygons were drawn in (clockwise or not), you could just copy the same code for the top quad, move it down on the Y axis to -1, and it would work, but ignoring the order the quad is drawn in can cause weird results once you get into fancy things such as texture mapping.
        glColor3f(1.0f,0.5f,0.0f);			// Set The Color To Orange
        glVertex3f( 1.0f,-1.0f, 1.0f);			// Top Right Of The Quad (Bottom)
        glVertex3f(-1.0f,-1.0f, 1.0f);			// Top Left Of The Quad (Bottom)
        glVertex3f(-1.0f,-1.0f,-1.0f);			// Bottom Left Of The Quad (Bottom)
        glVertex3f( 1.0f,-1.0f,-1.0f);			// Bottom Right Of The Quad (Bottom)
Now we draw the front of the Quad. We move one unit towards the screen, and away from the center to draw the front face. Notice the Z axis is always one. In the pyramid the Z axis was not always one. At the top, the Z axis was zero. If you tried changing the Z axis to zero in the following code, you'd notice that the corner you changed it on would slope into the screen. That's not something we want to do right now :)
        glColor3f(1.0f,0.0f,0.0f);			// Set The Color To Red
        glVertex3f( 1.0f, 1.0f, 1.0f);			// Top Right Of The Quad (Front)
        glVertex3f(-1.0f, 1.0f, 1.0f);			// Top Left Of The Quad (Front)
        glVertex3f(-1.0f,-1.0f, 1.0f);			// Bottom Left Of The Quad (Front)
        glVertex3f( 1.0f,-1.0f, 1.0f);			// Bottom Right Of The Quad (Front)
The back face is a quad the same as the front face, but it's set deeper into the screen. Notice the Z axis is now minus one for all of the points.
        glColor3f(1.0f,1.0f,0.0f);			// Set The Color To Yellow
        glVertex3f( 1.0f,-1.0f,-1.0f);			// Top Right Of The Quad (Back)
        glVertex3f(-1.0f,-1.0f,-1.0f);			// Top Left Of The Quad (Back)
        glVertex3f(-1.0f, 1.0f,-1.0f);			// Bottom Left Of The Quad (Back)
        glVertex3f( 1.0f, 1.0f,-1.0f);			// Bottom Right Of The Quad (Back)
Now we only have two more quads to draw and we're done. As usual, you'll notice one axis is always the same for all the points. In this case the X axis is always minus one. That's because we're always drawing to the left of center because this is the left face.
        glColor3f(0.0f,0.0f,1.0f);			// Set The Color To Blue
        glVertex3f(-1.0f, 1.0f, 1.0f);			// Top Right Of The Quad (Left)
        glVertex3f(-1.0f, 1.0f,-1.0f);			// Top Left Of The Quad (Left)
        glVertex3f(-1.0f,-1.0f,-1.0f);			// Bottom Left Of The Quad (Left)
        glVertex3f(-1.0f,-1.0f, 1.0f);			// Bottom Right Of The Quad (Left)
This is the last face to complete the cube. The X axis is always one. Drawing is counter clockwise. If you wanted to, you could leave this face out, and make a box :)

Or if you felt like experimenting, you could always try changing the color of each point on the cube to make it blend the same way the pyramid blends. You can see an example of a blended cube by downloading Evil's first GL demo from my web page. Run it and press TAB. You'll see a beautifully colored cube, with colors flowing across all the faces.
        glColor3f(1.0f,0.0f,1.0f);			// Set The Color To Violet
        glVertex3f( 1.0f, 1.0f,-1.0f);			// Top Right Of The Quad (Right)
        glVertex3f( 1.0f, 1.0f, 1.0f);			// Top Left Of The Quad (Right)
        glVertex3f( 1.0f,-1.0f, 1.0f);			// Bottom Left Of The Quad (Right)
        glVertex3f( 1.0f,-1.0f,-1.0f);			// Bottom Right Of The Quad (Right)
    glEnd();						// Done Drawing The Quad

    rtri+=0.2f;						// Increase The Rotation Variable For The Triangle
    rquad-=0.15f;						// Decrease The Rotation Variable For The Quad
    return TRUE;						// Keep Going
}
By the end of this tutorial, you should have a better understanding of how objects are created in 3D space. You have to think of the OpenGL screen as a giant piece of graph paper, with many transparent layers behind it. Almost like a giant cube made of of points. Some of the points move left to right, some move up and down, and some move further back in the cube. If you can visualize the depth into the screen, you shouldn't have any problems designing new 3D objects.

If you're having a hard time understanding 3D space, don't get frustrated. It can be difficult to grasp right off the start. An object like the cube is a good example to learn from. If you notice, the back face is drawn exactly the same as the front face, it's just further into the screen. Play around with the code, and if you just can't grasp it, email me, and I'll try to answer your questions.


Lesson 06 - Texture Mapping

Lesson 6
Learning how to texture map has many benefits. Lets say you wanted a missile to fly across the screen. Up until this tutorial we'd probably make the entire missile out of polygons, and fancy colors. With texture mapping, you can take a real picture of a missile and make the picture fly across the screen. Which do you think will look better? A photograph or an object made up of triangles and squares? By using texture mapping, not only will it look better, but your program will run faster. The texture mapped missile would only be one quad moving across the screen. A missile made out of polygons could be made up of hundreds or thousands of polygons. The single texture mapped quad will use alot less processing power.

Lets start off by adding five new lines of code to the top of lesson one. The first new line is #include <stdio.h>. Adding this header file allows us to work with files. In order to use fopen() later in the code we need to include this line. Then we add three new floating point variables... xrot, yrot and zrot. These variables will be used to rotate the cube on the x axis, the y axis, and the z axis. The last line GLuint texture[1] sets aside storage space for one texture. If you wanted to load in more than one texture, you would change the number one to the number of textures you wish to load.
#include <windows.h>								// Header File For Windows
#include <stdio.h>								// Header File For Standard Input/Output ( NEW )
#include <gl\gl.h>								// Header File For The OpenGL32 Library
#include <gl\glu.h>								// Header File For The GLu32 Library
#include <gl\glaux.h>								// Header File For The GLaux Library

HDC		hDC=NULL;							// Private GDI Device Context
HGLRC		hRC=NULL;							// Permanent Rendering Context
HWND		hWnd=NULL;							// Holds Our Window Handle
HINSTANCE	hInstance;							// Holds The Instance Of The Application

bool	keys[256];								// Array Used For The Keyboard Routine
bool	active=TRUE;								// Window Active Flag
bool	fullscreen=TRUE;							// Fullscreen Flag

GLfloat	xrot;									// X Rotation ( NEW )
GLfloat	yrot;									// Y Rotation ( NEW )
GLfloat	zrot;									// Z Rotation ( NEW )

GLuint	texture[1];								// Storage For One Texture ( NEW )

LRESULT	CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);				// Declaration For WndProc
Now immediately after the above code, and before ReSizeGLScene(), we want to add the following section of code. The job of this code is to load in a bitmap file. If the file doesn't exist NULL is sent back meaning the texture couldn't be loaded. Before I start explaining the code there are a few VERY important things you need to know about the images you plan to use as textures. The image height and width MUST be a power of 2. The width and height must be at least 64 pixels, and for compatability reasons, shouldn't be more than 256 pixels. If the image you want to use is not 64, 128 or 256 pixels on the width or height, resize it in an art program. There are ways around this limitation, but for now we'll just stick to standard texture sizes.

First thing we do is create a file handle. A handle is a value used to identify a resource so that our program can access it. We set the handle to NULL to start off.
AUX_RGBImageRec *LoadBMP(char *Filename)					// Loads A Bitmap Image
{
    FILE *File=NULL;							// File Handle
Next we check to make sure that a filename was actually given. The person may have use LoadBMP() without specifying the file to load, so we have to check for this. We don't want to try loading nothing :)
    if (!Filename)								// Make Sure A Filename Was Given
    {
        return NULL;							// If Not Return NULL
    }
If a filename was given, we check to see if the file exists. The line below tries to open the file.
    File=fopen(Filename,"r");						// Check To See If The File Exists
If we were able to open the file it obviously exists. We close the file with fclose(File) then we return the image data. auxDIBImageLoad(Filename) reads in the data.
    if (File)								// Does The File Exist?
    {
        fclose(File);							// Close The Handle
        return auxDIBImageLoad(Filename);				// Load The Bitmap And Return A Pointer
    }
If we were unable to open the file we'll return NULL. which means the file couldn't be loaded. Later on in the program we'll check to see if the file was loaded. If it wasn't we'll quit the program with an error message.
    return NULL;								// If Load Failed Return NULL
}
This is the section of code that loads the bitmap (calling the code above) and converts it into a texture.
int LoadGLTextures()								// Load Bitmaps And Convert To Textures
{
We'll set up a variable called Status. We'll use this variable to keep track of whether or not we were able to load the bitmap and build a texture. We set Status to FALSE (meaning nothing has been loaded or built) by default.
    int Status=FALSE;							// Status Indicator
Now we create an image record that we can store our bitmap in. The record will hold the bitmap width, height, and data.
    AUX_RGBImageRec *TextureImage[1];					// Create Storage Space For The Texture
We clear the image record just to make sure it's empty.
    memset(TextureImage,0,sizeof(void *)*1);				// Set The Pointer To NULL
Now we load the bitmap and convert it to a texture. TextureImage[0]=LoadBMP("Data/NeHe.bmp") will jump to our LoadBMP() code. The file named NeHe.bmp in the Data directory will be loaded. If everything goes well, the image data is stored in TextureImage[0], Status is set to TRUE, and we start to build our texture.
    // Load The Bitmap, Check For Errors, If Bitmap's Not Found Quit
    if (TextureImage[0]=LoadBMP("Data/NeHe.bmp"))
    {
        Status=TRUE;							// Set The Status To TRUE
Now that we've loaded the image data into TextureImage[0], we will build a texture using this data. The first line glGenTextures(1, &texture[0]) tells OpenGL we want to build one texture (increase the number if you load more than one texture), and we want the texture to be stored in slot 0 of texture[]. Remember at the very beginning of this tutorial we created room for one texture with the line GLuint texture[1]. Although you'd think the first texture would be stored at &texture[1] instead of &texture[0], it wont work. The first actual storage area is 0. If we wanted two textures we would use GLuint texture[2] and the second texture would be stored at texture[1].

The second line glBindTexture(GL_TEXTURE_2D, texture[0]) tells OpenGL that texture[0] (the first texture) will be a 2D texture. 2D textures have both height (on the Y axes) and width (on the X axes). The main function of glBindTexture is to point OpenGL to available memory. In this case we're telling OpenGL there is memory available at &texture[0]. When we create the texture, it will be stored in this memory space. Basically glBindTexture() points to ram that holds or will hold our texture.
        glGenTextures(1, &texture[0]);					// Create The Texture

        // Typical Texture Generation Using Data From The Bitmap
        glBindTexture(GL_TEXTURE_2D, texture[0]);
Next we create the actual texture. The following line tells OpenGL the texture will be a 2D texture (GL_TEXTURE_2D). Zero represents the images level of detail, this is usually left at zero. Three is the number of data components. Because the image is made up of red data, green data and blue data, there are three components. TextureImage[0]->sizeX is the width of the texture. If you know the width, you can put it here, but it's easier to let the computer figure it out for you. TextureImage[0]->sizey is the height of the texture. zero is the border. It's usually left at zero. GL_RGB tells OpenGL the image data we are using is made up of red, green and blue data in that order. GL_UNSIGNED_BYTE means the data that makes up the image is made up of unsigned bytes, and finally... TextureImage[0]->data tells OpenGL where to get the texture data from. In this case it points to the data stored in the TextureImage[0] record.
        // Generate The Texture
        glTexImage2D(GL_TEXTURE_2D, 0, 3, TextureImage[0]->sizeX, TextureImage[0]->sizeY, 0, GL_RGB, GL_UNSIGNED_BYTE, TextureImage[0]->data);
The next two lines tell OpenGL what type of filtering to use when the image is larger (GL_TEXTURE_MAG_FILTER) or stretched on the screen than the original texture, or when it's smaller (GL_TEXTURE_MIN_FILTER) on the screen than the actual texture. I usually use GL_LINEAR for both. This makes the texture look smooth way in the distance, and when it's up close to the screen. Using GL_LINEAR requires alot of work from the processor/video card, so if your system is slow, you might want to use GL_NEAREST. A texture that's filtered with GL_NEAREST will appear blocky when it's stretched. You can also try a combination of both. Make it filter things up close, but not things in the distance.
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);	// Linear Filtering
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);	// Linear Filtering
    }
Now we free up any ram that we may have used to store the bitmap data. We check to see if the bitmap data was stored in TextureImage[0]. If it was we check to see if the data has been stored. If data was stored, we erase it. Then we free the image structure making sure any used memory is freed up.
    if (TextureImage[0])							// If Texture Exists
    {
        if (TextureImage[0]->data)					// If Texture Image Exists
        {
            free(TextureImage[0]->data);				// Free The Texture Image Memory
        }

        free(TextureImage[0]);						// Free The Image Structure
    }
Finally we return the status. If everything went OK, the variable Status will be TRUE. If anything went wrong, Status will be FALSE.
    return Status;								// Return The Status
}
I've added a few lines of code to InitGL. I'll repost the entire section of code, so it's easy to see the lines that I've added, and where they go in the code. The first line if (!LoadGLTextures()) jumps to the routine above which loads the bitmap and makes a texture from it. If LoadGLTextures() fails for any reason, the next line of code will return FALSE. If everything went OK, and the texture was created, we enable 2D texture mapping. If you forget to enable texture mapping your object will usually appear solid white, which is definitely not good.
int InitGL(GLvoid)								// All Setup For OpenGL Goes Here
{
    if (!LoadGLTextures())							// Jump To Texture Loading Routine ( NEW )
    {
        return FALSE;							// If Texture Didn't Load Return FALSE ( NEW )
    }

    glEnable(GL_TEXTURE_2D);						// Enable Texture Mapping ( NEW )
    glShadeModel(GL_SMOOTH);						// Enable Smooth Shading
    glClearColor(0.0f, 0.0f, 0.0f, 0.5f);					// Black Background
    glClearDepth(1.0f);							// Depth Buffer Setup
    glEnable(GL_DEPTH_TEST);						// Enables Depth Testing
    glDepthFunc(GL_LEQUAL);							// The Type Of Depth Testing To Do
    glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);			// Really Nice Perspective Calculations
    return TRUE;								// Initialization Went OK
}
Now we draw the textured cube. You can replace the DrawGLScene code with the code below, or you can add the new code to the original lesson one code. This section will be heavily commented so it's easy to understand. The first two lines of code glClear() and glLoadIdentity() are in the original lesson one code. glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT) will clear the screen to the color we selected in InitGL(). In this case, the screen will be cleared to blue. The depth buffer will also be cleared. The view will then be reset with glLoadIdentity().
int DrawGLScene(GLvoid)								// Here's Where We Do All The Drawing
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);			// Clear Screen And Depth Buffer
    glLoadIdentity();							// Reset The Current Matrix
    glTranslatef(0.0f,0.0f,-5.0f);						// Move Into The Screen 5 Units
The following three lines of code will rotate the cube on the x axis, then the y axis, and finally the z axis. How much it rotates on each axis will depend on the value stored in xrot, yrot and zrot.
    glRotatef(xrot,1.0f,0.0f,0.0f);						// Rotate On The X Axis
    glRotatef(yrot,0.0f,1.0f,0.0f);						// Rotate On The Y Axis
    glRotatef(zrot,0.0f,0.0f,1.0f);						// Rotate On The Z Axis
The next line of code selects which texture we want to use. If there was more than one texture you wanted to use in your scene, you would select the texture using glBindTexture(GL_TEXTURE_2D, texture[number of texture to use]). If you wanted to change textures, you would bind to the new texture. One thing to note is that you can NOT bind a texture inside glBegin() and glEnd(), you have to do it before or after glBegin(). Notice how we use glBindTextures to specify which texture to create and to select a specific texture.
    glBindTexture(GL_TEXTURE_2D, texture[0]);				// Select Our Texture
To properly map a texture onto a quad, you have to make sure the top right of the texture is mapped to the top right of the quad. The top left of the texture is mapped to the top left of the quad, the bottom right of the texture is mapped to the bottom right of the quad, and finally, the bottom left of the texture is mapped to the bottom left of the quad. If the corners of the texture do not match the same corners of the quad, the image may appear upside down, sideways, or not at all.

The first value of glTexCoord2f is the X coordinate. 0.0f is the left side of the texture. 0.5f is the middle of the texture, and 1.0f is the right side of the texture. The second value of glTexCoord2f is the Y coordinate. 0.0f is the bottom of the texture. 0.5f is the middle of the texture, and 1.0f is the top of the texture.

So now we know the top left coordinate of a texture is 0.0f on X and 1.0f on Y, and the top left vertex of a quad is -1.0f on X, and 1.0f on Y. Now all you have to do is match the other three texture coordinates up with the remaining three corners of the quad.

Try playing around with the x and y values of glTexCoord2f. Changing 1.0f to 0.5f will only draw the left half of a texture from 0.0f (left) to 0.5f (middle of the texture). Changing 0.0f to 0.5f will only draw the right half of a texture from 0.5f (middle) to 1.0f (right).
    glBegin(GL_QUADS);
        // Front Face
        glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f, -1.0f,  1.0f);	// Bottom Left Of The Texture and Quad
        glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f, -1.0f,  1.0f);	// Bottom Right Of The Texture and Quad
        glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f,  1.0f,  1.0f);	// Top Right Of The Texture and Quad
        glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f,  1.0f,  1.0f);	// Top Left Of The Texture and Quad
        // Back Face
        glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f, -1.0f);	// Bottom Right Of The Texture and Quad
        glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f,  1.0f, -1.0f);	// Top Right Of The Texture and Quad
        glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f,  1.0f, -1.0f);	// Top Left Of The Texture and Quad
        glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f, -1.0f);	// Bottom Left Of The Texture and Quad
        // Top Face
        glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f,  1.0f, -1.0f);	// Top Left Of The Texture and Quad
        glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f,  1.0f,  1.0f);	// Bottom Left Of The Texture and Quad
        glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f,  1.0f,  1.0f);	// Bottom Right Of The Texture and Quad
        glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f,  1.0f, -1.0f);	// Top Right Of The Texture and Quad
        // Bottom Face
        glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f, -1.0f, -1.0f);	// Top Right Of The Texture and Quad
        glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f, -1.0f, -1.0f);	// Top Left Of The Texture and Quad
        glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f,  1.0f);	// Bottom Left Of The Texture and Quad
        glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f,  1.0f);	// Bottom Right Of The Texture and Quad
        // Right face
        glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f, -1.0f, -1.0f);	// Bottom Right Of The Texture and Quad
        glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f,  1.0f, -1.0f);	// Top Right Of The Texture and Quad
        glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f,  1.0f,  1.0f);	// Top Left Of The Texture and Quad
        glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f,  1.0f);	// Bottom Left Of The Texture and Quad
        // Left Face
        glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f, -1.0f, -1.0f);	// Bottom Left Of The Texture and Quad
        glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f,  1.0f);	// Bottom Right Of The Texture and Quad
        glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f,  1.0f,  1.0f);	// Top Right Of The Texture and Quad
        glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f,  1.0f, -1.0f);	// Top Left Of The Texture and Quad
    glEnd();
Now we increase the value of xrot, yrot and zrot. Try changing the number each variable increases by to make the cube spin faster or slower, or try changing a + to a - to make the cube spin the other direction.
    xrot+=0.3f;								// X Axis Rotation
    yrot+=0.2f;								// Y Axis Rotation
    zrot+=0.4f;								// Z Axis Rotation
    return true;								// Keep Going
}
You should now have a better understanding of texture mapping. You should be able to texture map the surface of any quad with an image of your choice. Once you feel confident with your understanding of 2D texture mapping, try adding six different textures to the cube.

Texture mapping isn't to difficult to understand once you understand texture coordinates. If you're having problems understanding any part of this tutorial, let me know. Either I'll rewrite that section of the tutorial, or I'll reply back to you in email. Have fun creating texture mapped scenes of your own :)


Lesson 07 - Texture Filters, Lighting & Keyboard Control

Lesson 7
In this tutorial I'll teach you how to use three different texture filters. I'll teach you how to move an object using keys on the keyboard, and I'll also teach you how to apply simple lighting to your OpenGL scene. Lots covered in this tutorial, so if the previous tutorials are giving you problems, go back and review. It's important to have a good understanding of the basics before you jump into the following code.

We're going to be modifying the code from lesson one again. As usual, if there are any major changes, I will write out the entire section of code that has been modified. We'll start off by adding a few new variables to the program.
#include <windows.h>								// Header File For Windows
#include <stdio.h>								// Header File For Standard Input/Output ( ADD )
#include <gl\gl.h>								// Header File For The OpenGL32 Library
#include <gl\glu.h>								// Header File For The GLu32 Library
#include <gl\glaux.h>								// Header File For The GLaux Library

HDC		hDC=NULL;							// Private GDI Device Context
HGLRC		hRC=NULL;							// Permanent Rendering Context
HWND		hWnd=NULL;							// Holds Our Window Handle
HINSTANCE	hInstance;							// Holds The Instance Of The Application

bool	keys[256];								// Array Used For The Keyboard Routine
bool	active=TRUE;								// Window Active Flag
bool	fullscreen=TRUE;							// Fullscreen Flag
The lines below are new. We're going to add three boolean variables. BOOL means the variable can only be TRUE or FALSE. We create a variable called light to keep track of whether or not the lighting is on or off. The variables lp and fp are used to store whether or not the 'L' or 'F' key has been pressed. I'll explain why we need these variables later on in the code. For now, just know that they are important.
BOOL	light;									// Lighting ON / OFF
BOOL	lp;									// L Pressed?
BOOL	fp;									// F Pressed?
Now we're going to set up five variables that will control the angle on the x axis (xrot), the angle on the y axis (yrot), the speed the crate is spinning at on the x axis (xspeed), and the speed the crate is spinning at on the y axis (yspeed). We'll also create a variable called z that will control how deep into the screen (on the z axis) the crate is.
GLfloat	xrot;									// X Rotation
GLfloat	yrot;									// Y Rotation
GLfloat xspeed;									// X Rotation Speed
GLfloat yspeed;									// Y Rotation Speed

GLfloat	z=-5.0f;								// Depth Into The Screen
Now we set up the arrays that will be used to create the lighting. We'll use two different types of light. The first type of light is called ambient light. Ambient light is light that doesn't come from any particular direction. All the objects in your scene will be lit up by the ambient light. The second type of light is called diffuse light. Diffuse light is created by your light source and is reflected off the surface of an object in your scene. Any surface of an object that the light hits directly will be very bright, and areas the light barely gets to will be darker. This creates a nice shading effect on the sides of our crate.

Light is created the same way color is created. If the first number is 1.0f, and the next two are 0.0f, we will end up with a bright red light. If the third number is 1.0f, and the first two are 0.0f, we will have a bright blue light. The last number is an alpha value. We'll leave it at 1.0f for now.

So in the line below, we are storing the values for a white ambient light at half intensity (0.5f). Because all the numbers are 0.5f, we will end up with a light that's halfway between off (black) and full brightness (white). Red, blue and green mixed at the same value will create a shade from black(0.0f) to white(1.0f). Without an ambient light, spots where there is no diffuse light will appear very dark.
GLfloat LightAmbient[]= { 0.5f, 0.5f, 0.5f, 1.0f }; 				// Ambient Light Values ( NEW )
In the next line we're storing the values for a super bright, full intensity diffuse light. All the values are 1.0f. This means the light is as bright as we can get it. A diffuse light this bright lights up the front of the crate nicely.
GLfloat LightDiffuse[]= { 1.0f, 1.0f, 1.0f, 1.0f };				 // Diffuse Light Values ( NEW )
Finally we store the position of the light. The first three numbers are the same as glTranslate's three numbers. The first number is for moving left and right on the x plane, the second number is for moving up and down on the y plane, and the third number is for moving into and out of the screen on the z plane. Because we want our light hitting directly on the front of the crate, we don't move left or right so the first value is 0.0f (no movement on x), we don't want to move up and down, so the second value is 0.0f as well. For the third value we want to make sure the light is always in front of the crate. So we'll position the light off the screen, towards the viewer. Lets say the glass on your monitor is at 0.0f on the z plane. We'll position the light at 2.0f on the z plane. If you could actually see the light, it would be floating in front of the glass on your monitor. By doing this, the only way the light would be behind the crate is if the crate was also in front of the glass on your monitor. Of course if the crate was no longer behind the glass on your monitor, you would no longer see the crate, so it doesn't matter where the light is. Does that make sense?

There's no real easy way to explain the third parameter. You should know that -2.0f is going to be closer to you than -5.0f. and -100.0f would be WAY into the screen. Once you get to 0.0f, the image is so big, it fills the entire monitor. Once you start going into positive values, the image no longer appears on the screen cause it has "gone past the screen". That's what I mean when I say out of the screen. The object is still there, you just can't see it anymore.

Leave the last number at 1.0f. This tells OpenGL the designated coordinates are the position of the light source. More about this in a later tutorial.
GLfloat LightPosition[]= { 0.0f, 0.0f, 2.0f, 1.0f };				 // Light Position ( NEW )
The filter variable below is to keep track of which texture to display. The first texture (texture 0) is made using gl_nearest (no smoothing). The second texture (texture 1) uses gl_linear filtering which smooths the image out quite a bit. The third texture (texture 2) uses mipmapped textures, creating a very nice looking texture. The variable filter will equal 0, 1 or 2 depending on the texture we want to use. We start off with the first texture.

GLuint texture[3] creates storage space for the three different textures. The textures will be stored at texture[0], texture[1] and texture[2].
GLuint	filter;									// Which Filter To Use
GLuint	texture[3];								// Storage for 3 textures

LRESULT	CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);				// Declaration For WndProc
Now we load in a bitmap, and create three different textures from it. This tutorial uses the glaux library to load in the bitmap, so make sure you have the glaux library included before you try compiling the code. I know Delphi, and Visual C++ both have glaux libraries. I'm not sure about other languages. I'm only going to explain what the new lines of code do, if you see a line I haven't commented on, and you're wondering what it does, check tutorial six. It explains loading, and building texture maps from bitmap images in great detail.

Immediately after the above code, and before ReSizeGLScene(), we want to add the following section of code. This is the same code we used in lesson 6 to load in a bitmap file. Nothing has changed. If you're not sure what any of the following lines do, read tutorial six. It explains the code below in detail.
AUX_RGBImageRec *LoadBMP(char *Filename)					// Loads A Bitmap Image
{
    FILE *File=NULL;							// File Handle

    if (!Filename)								// Make Sure A Filename Was Given
    {
        return NULL;							// If Not Return NULL
    }

    File=fopen(Filename,"r");						// Check To See If The File Exists

    if (File)								// Does The File Exist?
    {
        fclose(File);							// Close The Handle
        return auxDIBImageLoad(Filename);				// Load The Bitmap And Return A Pointer
    }
    return NULL;								// If Load Failed Return NULL
}
This is the section of code that loads the bitmap (calling the code above) and converts it into 3 textures. Status is used to keep track of whether or not the texture was loaded and created.
int LoadGLTextures()								// Load Bitmaps And Convert To Textures
{
    int Status=FALSE;							// Status Indicator

    AUX_RGBImageRec *TextureImage[1];					// Create Storage Space For The Texture

    memset(TextureImage,0,sizeof(void *)*1);				// Set The Pointer To NULL
Now we load the bitmap and convert it to a texture. TextureImage[0]=LoadBMP("Data/Crate.bmp") will jump to our LoadBMP() code. The file named Crate.bmp in the Data directory will be loaded. If everything goes well, the image data is stored in TextureImage[0], Status is set to TRUE, and we start to build our texture.
    // Load The Bitmap, Check For Errors, If Bitmap's Not Found Quit
    if (TextureImage[0]=LoadBMP("Data/Crate.bmp"))
    {
        Status=TRUE;							// Set The Status To TRUE
Now that we've loaded the image data into TextureImage[0], we'll use the data to build 3 textures. The line below tells OpenGL we want to build three textures, and we want the texture to be stored in texture[0], texture[1] and texture[2].
        glGenTextures(3, &texture[0]);					// Create Three Textures
In tutorial six, we used linear filtered texture maps. They require a hefty amount of processing power, but they look real nice. The first type of texture we're going to create in this tutorial uses GL_NEAREST. Basically this type of texture has no filtering at all. It takes very little processing power, and it looks real bad. If you've ever played a game where the textures look all blocky, it's probably using this type of texture. The only benefit of this type of texture is that projects made using this type of texture will usually run pretty good on slow computers.

You'll notice we're using GL_NEAREST for both the MIN and MAG. You can mix GL_NEAREST with GL_LINEAR, and the texture will look a bit better, but we're intested in speed, so we'll use low quality for both. The MIN_FILTER is the filter used when an image is drawn smaller than the original texture size. The MAG_FILTER is used when the image is bigger than the original texture size.
        // Create Nearest Filtered Texture
        glBindTexture(GL_TEXTURE_2D, texture[0]);
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_NEAREST); ( NEW )
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_NEAREST); ( NEW )
        glTexImage2D(GL_TEXTURE_2D, 0, 3, TextureImage[0]->sizeX, TextureImage[0]->sizeY, 0, GL_RGB, GL_UNSIGNED_BYTE, TextureImage[0]->data);
The next texture we build is the same type of texture we used in tutorial six. Linear filtered. The only thing that has changed is that we are storing this texture in texture[1] instead of texture[0] because it's our second texture. If we stored it in texture[0] like above, it would overwrite the GL_NEAREST texture (the first texture).
        // Create Linear Filtered Texture
        glBindTexture(GL_TEXTURE_2D, texture[1]);
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
        glTexImage2D(GL_TEXTURE_2D, 0, 3, TextureImage[0]->sizeX, TextureImage[0]->sizeY, 0, GL_RGB, GL_UNSIGNED_BYTE, TextureImage[0]->data);
Now for a new way to make textures. Mipmapping! You may have noticed that when you make an image very tiny on the screen, alot of the fine details disappear. Patterns that used to look nice start looking real bad. When you tell OpenGL to build a mipmapped texture OpenGL tries to build different sized high quality textures. When you draw a mipmapped texture to the screen OpenGL will select the BEST looking texture from the ones it built (texture with the most detail) and draw it to the screen instead of resizing the original image (which causes detail loss).

I had said in tutorial six there was a way around the 64,128,256,etc limit that OpenGL puts on texture width and height. gluBuild2DMipmaps is it. From what I've found, you can use any bitmap image you want (any width and height) when building mipmapped textures. OpenGL will automatically size it to the proper width and height.

Because this is texture number three, we're going to store this texture in texture[2]. So now we have texture[0] which has no filtering, texture[1] which uses linear filtering, and texture[2] which uses mipmapped textures. We're done building the textures for this tutorial.
        // Create MipMapped Texture
        glBindTexture(GL_TEXTURE_2D, texture[2]);
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR_MIPMAP_NEAREST); ( NEW )
The following line builds the mipmapped texture. We're creating a 2D texture using three colors (red, green, blue). TextureImage[0]->sizeX is the bitmaps width, TextureImage[0]->sizeY is the bitmaps height, GL_RGB means we're using Red, Green, Blue colors in that order. GL_UNSIGNED_BYTE means the data that makes the texture is made up of bytes, and TextureImage[0]->data points to the bitmap data that we're building the texture from.
        gluBuild2DMipmaps(GL_TEXTURE_2D, 3, TextureImage[0]->sizeX, TextureImage[0]->sizeY, GL_RGB, GL_UNSIGNED_BYTE, TextureImage[0]->data); ( NEW )
    }
Now we free up any ram that we may have used to store the bitmap data. We check to see if the bitmap data was stored in TextureImage[0]. If it was we check to see if the data has been stored. If data was stored, we erase it. Then we free the image structure making sure any used memory is freed up.
    if (TextureImage[0])							// If Texture Exists
    {
        if (TextureImage[0]->data)					// If Texture Image Exists
        {
            free(TextureImage[0]->data);				// Free The Texture Image Memory
        }

        free(TextureImage[0]);						// Free The Image Structure
    }
Finally we return the status. If everything went OK, the variable Status will be TRUE. If anything went wrong, Status will be FALSE.
    return Status;								// Return The Status
}
Now we load the textures, and initialize the OpenGL settings. The first line of InitGL loads the textures using the code above. After the textures have been created, we enable 2D texture mapping with glEnable(GL_TEXTURE_2D). The shade mode is set to smooth shading, The background color is set to black, we enable depth testing, then we enable nice perspective calculations.
int InitGL(GLvoid)								// All Setup For OpenGL Goes Here
{
    if (!LoadGLTextures())							// Jump To Texture Loading Routine
    {
        return FALSE;							// If Texture Didn't Load Return FALSE
    }

    glEnable(GL_TEXTURE_2D);						// Enable Texture Mapping
    glShadeModel(GL_SMOOTH);						// Enable Smooth Shading
    glClearColor(0.0f, 0.0f, 0.0f, 0.5f);					// Black Background
    glClearDepth(1.0f);							// Depth Buffer Setup
    glEnable(GL_DEPTH_TEST);						// Enables Depth Testing
    glDepthFunc(GL_LEQUAL);							// The Type Of Depth Testing To Do
    glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);			// Really Nice Perspective Calculations
Now we set up the lighting. The line below will set the amount of ambient light that light1 will give off. At the beginning of this tutorial we stored the amount of ambient light in LightAmbient. The values we stored in the array will be used (half intensity ambient light).
    glLightfv(GL_LIGHT1, GL_AMBIENT, LightAmbient);				// Setup The Ambient Light
Next we set up the amount of diffuse light that light number one will give off. We stored the amount of diffuse light in LightDiffuse. The values we stored in this array will be used (full intensity white light).
    glLightfv(GL_LIGHT1, GL_DIFFUSE, LightDiffuse);				// Setup The Diffuse Light
Now we set the position of the light. We stored the position in LightPosition. The values we stored in this array will be used (right in the center of the front face, 0.0f on x, 0.0f on y, and 2 unit towards the viewer {coming out of the screen} on the z plane).
    glLightfv(GL_LIGHT1, GL_POSITION,LightPosition);			// Position The Light
Finally, we enable light number one. We haven't enabled GL_LIGHTING though, so you wont see any lighting just yet. The light is set up, and positioned, it's even enabled, but until we enable GL_LIGHTING, the light will not work.
    glEnable(GL_LIGHT1);							// Enable Light One
    return TRUE;								// Initialization Went OK
}
In the next section of code, we're going to draw the texture mapped cube. I will comment a few of the line only because they are new. If you're not sure what the uncommented lines do, check tutorial number six.
int DrawGLScene(GLvoid)								// Here's Where We Do All The Drawing
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);			// Clear The Screen And The Depth Buffer
    glLoadIdentity();							// Reset The View
The next three lines of code position and rotate the texture mapped cube. glTranslatef(0.0f,0.0f,z) moves the cube to the value of z on the z plane (away from and towards the viewer). glRotatef(xrot,1.0f,0.0f,0.0f) uses the variable xrot to rotate the cube on the x axis. glRotatef(yrot,1.0f,0.0f,0.0f) uses the variable yrot to rotate the cube on the y axis.
    glTranslatef(0.0f,0.0f,z);						// Translate Into/Out Of The Screen By z

    glRotatef(xrot,1.0f,0.0f,0.0f);						// Rotate On The X Axis By xrot
    glRotatef(yrot,0.0f,1.0f,0.0f);						// Rotate On The Y Axis By yrot
The next line is similar to the line we used in tutorial six, but instead of binding texture[0], we are binding texture[filter]. Any time we press the 'F' key, the value in filter will increase. If this value is higher than two, the variable filter is set back to zero. When the program starts the filter will be set to zero. This is the same as saying glBindTexture(GL_TEXTURE_2D, texture[0]). If we press 'F' once more, the variable filter will equal one, which is the same as saying glBindTexture(GL_TEXTURE_2D, texture[1]). By using the variable filter we can select any of the three textures we've made.
    glBindTexture(GL_TEXTURE_2D, texture[filter]);				// Select A Texture Based On filter

    glBegin(GL_QUADS);							// Start Drawing Quads
glNormal3f is new to my tutorials. A normal is a line pointing straight out of the middle of a polygon at a 90 degree angle. When you use lighting, you need to specify a normal. The normal tells OpenGL which direction the polygon is facing... which way is up. If you don't specify normals, all kinds of weird things happen. Faces that shouldn't light up will light up, the wrong side of a polygon will light up, etc. The normal should point outwards from the polygon.

Looking at the front face you'll notice that the normal is positive on the z axis. This means the normal is pointing at the viewer. Exactly the direction we want it pointing. On the back face, the normal is pointing away from the viewer, into the screen. Again exactly what we want. If the cube is spun 180 degrees on either the x or y axis, the front will be facing into the screen and the back will be facing towards the viewer. No matter what face is facing the viewer, the normal of that face will also be pointing towards the viewer. Because the light is close to the viewer, any time the normal is pointing towards the viewer it's also pointing towards the light. When it does, the face will light up. The more a normal points towards the light, the brighter that face is. If you move into the center of the cube you'll notice it's dark. The normals are point out, not in, so there's no light inside the box, exactly as it should be.
        // Front Face
        glNormal3f( 0.0f, 0.0f, 1.0f);					// Normal Pointing Towards Viewer
        glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f, -1.0f,  1.0f);	// Point 1 (Front)
        glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f, -1.0f,  1.0f);	// Point 2 (Front)
        glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f,  1.0f,  1.0f);	// Point 3 (Front)
        glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f,  1.0f,  1.0f);	// Point 4 (Front)
        // Back Face
        glNormal3f( 0.0f, 0.0f,-1.0f);					// Normal Pointing Away From Viewer
        glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f, -1.0f);	// Point 1 (Back)
        glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f,  1.0f, -1.0f);	// Point 2 (Back)
        glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f,  1.0f, -1.0f);	// Point 3 (Back)
        glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f, -1.0f);	// Point 4 (Back)
        // Top Face
        glNormal3f( 0.0f, 1.0f, 0.0f);					// Normal Pointing Up
        glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f,  1.0f, -1.0f);	// Point 1 (Top)
        glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f,  1.0f,  1.0f);	// Point 2 (Top)
        glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f,  1.0f,  1.0f);	// Point 3 (Top)
        glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f,  1.0f, -1.0f);	// Point 4 (Top)
        // Bottom Face
        glNormal3f( 0.0f,-1.0f, 0.0f);					// Normal Pointing Down
        glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f, -1.0f, -1.0f);	// Point 1 (Bottom)
        glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f, -1.0f, -1.0f);	// Point 2 (Bottom)
        glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f,  1.0f);	// Point 3 (Bottom)
        glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f,  1.0f);	// Point 4 (Bottom)
        // Right face
        glNormal3f( 1.0f, 0.0f, 0.0f);					// Normal Pointing Right
        glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f, -1.0f, -1.0f);	// Point 1 (Right)
        glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f,  1.0f, -1.0f);	// Point 2 (Right)
        glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f,  1.0f,  1.0f);	// Point 3 (Right)
        glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f,  1.0f);	// Point 4 (Right)
        // Left Face
        glNormal3f(-1.0f, 0.0f, 0.0f);					// Normal Pointing Left
        glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f, -1.0f, -1.0f);	// Point 1 (Left)
        glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f,  1.0f);	// Point 2 (Left)
        glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f,  1.0f,  1.0f);	// Point 3 (Left)
        glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f,  1.0f, -1.0f);	// Point 4 (Left)
    glEnd();								// Done Drawing Quads
The next two lines increase xrot and yrot by the amount stored in xspeed, and yspeed. If the value in xspeed or yspeed is high, xrot and yrot will increase quickly. The faster xrot, or yrot increases, the faster the cube spins on that axis.
    xrot+=xspeed;								// Add xspeed To xrot
    yrot+=yspeed;								// Add yspeed To yrot
    return TRUE;								// Keep Going
}
Now we move down to WinMain(). Were going to add code to turn lighting on and off, spin the crate, change the filter and move the crate into and out of the screen. Closer to the bottom of WinMain() you will see the command SwapBuffers(hDC). Immediately after this line, add the following code.

This code checks to see if the letter 'L' has been pressed on the keyboard. The first line checks to see if 'L' is being pressed. If 'L' is being pressed, but lp isn't false, meaning 'L' has already been pressed once or it's being held down, nothing will happen.
                SwapBuffers(hDC);				// Swap Buffers (Double Buffering)
                if (keys['L'] && !lp)				// L Key Being Pressed Not Held?
                {
If lp was false, meaning the 'L' key hasn't been pressed yet, or it's been released, lp becomes true. This forces the person to let go of the 'L' key before this code will run again. If we didn't check to see if the key was being held down, the lighting would flicker off and on over and over, because the program would think you were pressing the 'L' key over and over again each time it came to this section of code.

Once lp has been set to true, telling the computer that 'L' is being held down, we toggle lighting off and on. The variable light can only be true of false. So if we say light=!light, what we are actually saying is light equals NOT light. Which in english translates to if light equals true make light not true (false), and if light equals false, make light not false (true). So if light was true, it becomes false, and if light was false it becomes true.
                    lp=TRUE;				// lp Becomes TRUE
                    light=!light;				// Toggle Light TRUE/FALSE
Now we check to see what light ended up being. The first line translated to english means: If light equals false. So if you put it all together, the lines do the following: If light equals false, disable lighting. This turns all lighting off. The command 'else' translates to: if it wasn't false. So if light wasn't false, it must have been true, so we turn lighting on.
                    if (!light)				// If Not Light
                    {
                        glDisable(GL_LIGHTING);		// Disable Lighting
                    }
                    else					// Otherwise
                    {
                        glEnable(GL_LIGHTING);		// Enable Lighting
                    }
                }
The following line checks to see if we stopped pressing the 'L' key. If we did, it makes the variable lp equal false, meaning the 'L' key isn't pressed. If we didn't check to see if the key was released, we'd be able to turn lighting on once, but because the computer would always think 'L' was being held down so it wouldn't let us turn it back off.
                if (!keys['L'])					// Has L Key Been Released?
                {
                    lp=FALSE;				// If So, lp Becomes FALSE
                }
Now we do something similar with the 'F' key. if the key is being pressed, and it's not being held down or it's never been pressed before, it will make the variable fp equal true meaning the key is now being held down. It will then increase the variable called filter. If filter is greater than 2 (which would be texture[3], and that texture doesn't exist), we reset the variable filter back to zero.
                if (keys['F'] && !fp)				// Is F Key Being Pressed?
                {
                    fp=TRUE;				// fp Becomes TRUE
                    filter+=1;				// filter Value Increases By One
                    if (filter>2)				// Is Value Greater Than 2?
                    {
                        filter=0;			// If So, Set filter To 0
                    }
                }
                if (!keys['F'])					// Has F Key Been Released?
                {
                    fp=FALSE;				// If So, fp Becomes FALSE
                }
The next four lines check to see if we are pressing the 'Page Up' key. If we are it decreases the variable z. If this variable decreases, the cube will move into the distance because of the glTranslatef(0.0f,0.0f,z) command used in the DrawGLScene procedure.
                if (keys[VK_PRIOR])				// Is Page Up Being Pressed?
                {
                    z-=0.02f;				// If So, Move Into The Screen
                }
These four lines check to see if we are pressing the 'Page Down' key. If we are it increases the variable z and moves the cube towards the viewer because of the glTranslatef(0.0f,0.0f,z) command used in the DrawGLScene procedure.
                if (keys[VK_NEXT])				// Is Page Down Being Pressed?
                {
                    z+=0.02f;				// If So, Move Towards The Viewer
                }
Now all we have to check for is the arrow keys. By pressing left or right, xspeed is increased or decreased. By pressing up or down, yspeed is increased or decreased. Remember further up in the tutorial I said that if the value in xspeed or yspeed was high, the cube would spin faster. The longer you hold down an arrow key, the faster the cube will spin in that direction.
                if (keys[VK_UP])				// Is Up Arrow Being Pressed?
                {
                    xspeed-=0.01f;				// If So, Decrease xspeed
                }
                if (keys[VK_DOWN])				// Is Down Arrow Being Pressed?
                {
                    xspeed+=0.01f;				// If So, Increase xspeed
                }
                if (keys[VK_RIGHT])				// Is Right Arrow Being Pressed?
                {
                    yspeed+=0.01f;				// If So, Increase yspeed
                }
                if (keys[VK_LEFT])				// Is Left Arrow Being Pressed?
                {
                    yspeed-=0.01f;				// If So, Decrease yspeed
                }
Like all the previous tutorials, make sure the title at the top of the window is correct.
                if (keys[VK_F1])				// Is F1 Being Pressed?
                {
                    keys[VK_F1]=FALSE;			// If So Make Key FALSE
                    KillGLWindow();				// Kill Our Current Window
                    fullscreen=!fullscreen;			// Toggle Fullscreen / Windowed Mode
                    // Recreate Our OpenGL Window
                    if (!CreateGLWindow("NeHe's Textures, Lighting & Keyboard Tutorial",640,480,16,fullscreen))
                    {
                        return 0;			// Quit If Window Was Not Created
                    }
                }
            }
        }
    }

    // Shutdown
    KillGLWindow();								// Kill The Window
    return (msg.wParam);							// Exit The Program
}
By the end of this tutorial you should be able to create and interact with high quality, realistic looking, textured mapped objects made up of quads. You should understand the benefits of each of the three filters used in this tutorial. By pressing specific keys on the keyboard you should be able to interact with the object(s) on the screen, and finally, you should know how to apply simple lighting to a scene making the scene appear more realistic.


Lesson 08 - Blending

Lesson 8
Most special effects in OpenGL rely on some type of blending. Blending is used to combine the color of a given pixel that is about to be drawn with the pixel that is already on the screen. How the colors are combined is based on the alpha value of the colors, and/or the blending function that is being used. Alpha is a 4th color component usually specified at the end. In the past you have used GL_RGB to specify color with 3 components. GL_RGBA can be used to specify alpha as well. In addition, we can use glColor4f() instead of glColor3f().

Most people think of Alpha as how opaque a material is. An alpha value of 0.0 would mean that the material is completely transparent. A value of 1.0 would be totally opaque.

The Blending Equation

If you are uncomfortable with math, and just want to see how to do transparency, skip this section. If you want to understand how blending works, this section is for you.

(Rs Sr + Rd Dr, Gs Sg + Gd Dg, Bs Sb + Bd Db, As Sa + Ad Da)

OpenGL will calculate the result of blending two pixels based on the above equation. The s and r subscripts specify the source and destination pixels. The S and D components are the blend factors. These values indicate how you would like to blend the pixels. The most common values for S and D are (As, As, As, As) (AKA source alpha) for S and (1, 1, 1, 1) - (As, As, As, As) (AKA one minus src alpha) for D. This will yield a blending equation that looks like this:

(Rs As + Rd (1 - As), Gs As + Gd (1 - As), Bs As + Bs (1 - As), As As + Ad (1 - As))

This equation will yield transparent/translucent style effects.

Blending in OpenGL

We enable blending just like everything else. Then we set the equation, and turn off depth buffer writing when drawing transparent objects, since we still want objects behind the translucent shapes to be drawn. This isn't the proper way to blend, but most the time in simple projects it will work fine.

Rui Martins Adds: The correct way is to draw all the transparent (with alpha < 1.0) polys after you have drawn the entire scene, and to draw them in reverse depth order (farthest first).

This is due to the fact that blending two polygons (1 and 2) in different order gives different results, i.e. (assuming poly 1 is nearest to the viewer, the correct way would be to draw poly 2 first and then poly 1. If you look at it, like in reality, all the light comming from behind these two polys (which are transparent) has to pass poly 2 first and then poly 1 before it reaches the eye of the viewer.

You should SORT THE TRANSPARENT POLYGONS BY DEPTH and draw them AFTER THE ENTIRE SCENE HAS BEEN DRAWN, with the DEPTH BUFFER ENABLED, or you will get incorrect results. I know this sometimes is a pain, but this is the correct way to do it.

We'll be using the code from lesson seven. We start off by adding two new variables to the top of the code. I'll rewrite the entire section of code for clarity.
#include <windows.h>					// Header File For Windows
#include <stdio.h>					// Header File For Standard Input/Output
#include <gl\gl.h>					// Header File For The OpenGL32 Library
#include <gl\glu.h>					// Header File For The GLu32 Library
#include <gl\glaux.h>					// Header File For The GLaux Library

HDC		hDC=NULL;				// Private GDI Device Context
HGLRC		hRC=NULL;				// Permanent Rendering Context
HWND		hWnd=NULL;				// Holds Our Window Handle
HINSTANCE	hInstance;				// Holds The Instance Of The Application

bool	keys[256];					// Array Used For The Keyboard Routine
bool	active=TRUE;					// Window Active Flag Set To TRUE By Default
bool	fullscreen=TRUE;				// Fullscreen Flag Set To Fullscreen Mode By Default
bool	light;						// Lighting ON/OFF
bool    blend;						// Blending OFF/ON? ( NEW )
bool	lp;						// L Pressed?
bool	fp;						// F Pressed?
bool	bp;						// B Pressed? ( NEW )

GLfloat	xrot;						// X Rotation
GLfloat	yrot;						// Y Rotation
GLfloat xspeed;						// X Rotation Speed
GLfloat yspeed;						// Y Rotation Speed

GLfloat	z=-5.0f;					// Depth Into The Screen

GLfloat LightAmbient[]=  { 0.5f, 0.5f, 0.5f, 1.0f };	// Ambient Light Values
GLfloat LightDiffuse[]=	 { 1.0f, 1.0f, 1.0f, 1.0f };	// Diffuse Light Values
GLfloat LightPosition[]= { 0.0f, 0.0f, 2.0f, 1.0f };	// Light Position

GLuint	filter;						// Which Filter To Use
GLuint	texture[3];					// Storage for 3 textures

LRESULT	CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);	// Declaration For WndProc
Move down to LoadGLTextures(). Find the line that says texture1 = auxDIBImageLoad("Data/crate.bmp"), change it to the line below. We're using a stained glass type texture for this tutorial instead of the crate texture.
    texture1 = auxDIBImageLoad("Data/glass.bmp");	// Load The Glass Bitmap ( MODIFIED )
Add the following two lines somewhere in the InitGL() section of code. What this line does is sets the drawing brightness of the object to full brightness with 50% alpha (opacity). This means when blending is enabled, the object will be 50% transparent. The second line sets the type of blending we're going to use.

Rui Martins Adds: An alpha value of 0.0 would mean that the material is completely transparent. A value of 1.0 would be totally opaque.
    glColor4f(1.0f,1.0f,1.0f,0.5f);			// Full Brightness, 50% Alpha ( NEW )
    glBlendFunc(GL_SRC_ALPHA,GL_ONE);		// Blending Function For Translucency Based On Source Alpha Value ( NEW )
Look for the following section of code, it can be found at the very bottom of lesson seven.
    if (keys[VK_LEFT])				// Is Left Arrow Being Pressed?
    {
        yspeed-=0.01f;				// If So, Decrease yspeed
    }
Right under the above code, we want to add the following lines. The lines below watch to see if the 'B' key has been pressed. If it has been pressed, the computer checks to see if blending is off or on. If blending is on, the computer turns it off. If blending was off, the computer will turn it on.
    if (keys['B'] && !bp)				// Is B Key Pressed And bp FALSE?
    {
        bp=TRUE;				// If So, bp Becomes TRUE
        blend = !blend;				// Toggle blend TRUE / FALSE
        if(blend)				// Is blend TRUE?
        {
            glEnable(GL_BLEND);		// Turn Blending On
            glDisable(GL_DEPTH_TEST);	// Turn Depth Testing Off
        }
        else					// Otherwise
        {
            glDisable(GL_BLEND);		// Turn Blending Off
            glEnable(GL_DEPTH_TEST);	// Turn Depth Testing On
        }
    }
    if (!keys['B'])					// Has B Key Been Released?
    {
        bp=FALSE;				// If So, bp Becomes FALSE
    }
But how can we specify the color if we are using a texture map? Simple, in modulated texture mode, each pixel that is texture mapped is multiplied by the current color. So, if the color to be drawn is (0.5, 0.6, 0.4), we multiply it times the color and we get (0.5, 0.6, 0.4, 0.2) (alpha is assumed to be 1.0 if not specified).

Thats it! Blending is actually quite simple to do in OpenGL.

Note (11/13/99)

I ( NeHe ) have modified the blending code so the output of the object looks more like it should. Using Alpha values for the source and destination to do the blending will cause artifacting. Causing back faces to appear darker, along with side faces. Basically the object will look very screwy. The way I do blending may not be the best way, but it works, and the object appears to look like it should when lighting is enabled. Thanks to Tom for the initial code, the way he was blending was the proper way to blend with alpha values, but didn't look as attractive as people expected :)

The code was modified once again to address problems that some video cards had with glDepthMask(). It seems this command would not effectively enable and disable depth buffer testing on some cards, so I've changed back to the old fashioned glEnable and Disable of Depth Testing.

Alpha from texture map.

The alpha value that is used for transparency can be read from a texture map just like color, to do this, you will need to get alpha into the image you want to load, and then use GL_RGBA for the color format in calls to glTexImage2D().

Questions?

If you have any questions, feel free to contact me at stanis@cs.wisc.edu.

Tom Stanis


Lesson 09 - Moving Bitmaps In 3D Space

Lesson 9
Welcome to Tutorial 9. By now you should have a very good understanding of OpenGL. You've learned everything from setting up an OpenGL Window, to texture mapping a spinning object while using lighting and blending. This will be the first semi-advanced tutorial. You'll learn the following: Moving bitmaps around the screen in 3D, removing the black pixels around the bitmap (using blending), adding color to a black & white texture and finally you'll learn how to create fancy colors and simple animation by mixing different colored textures together.

We'll be modifying the code from lesson one for this tutorial. We'll start off by adding a few new variables to the beginning of the program. I'll rewrite the entire section of code so it's easier to see where the changes are being made.
#include <windows.h>						// Header File For Windows
#include <stdio.h>						// Header File For Standard Input/Output
#include <gl\gl.h>						// Header File For The OpenGL32 Library
#include <gl\glu.h>						// Header File For The GLu32 Library
#include <gl\glaux.h>						// Header File For The GLaux Library

HDC		hDC=NULL;					// Private GDI Device Context
HGLRC		hRC=NULL;					// Permanent Rendering Context
HWND		hWnd=NULL;					// Holds Our Window Handle
HINSTANCE	hInstance;					// Holds The Instance Of The Application

bool	keys[256];						// Array Used For The Keyboard Routine
bool	active=TRUE;						// Window Active Flag Set To TRUE By Default
bool	fullscreen=TRUE;					// Fullscreen Flag Set To Fullscreen Mode By Default
The following lines are new. twinkle and tp are BOOLean variables meaning they can be TRUE or FALSE. twinkle will keep track of whether or not the twinkle effect has been enabled. tp is used to check if the 'T' key has been pressed or released. (pressed tp=TRUE, relased tp=FALSE).
BOOL	twinkle;						// Twinkling Stars
BOOL	tp;							// 'T' Key Pressed?
num will keep track of how many stars we draw to the screen. It's defined as a CONSTant. This means it can never change within the code. The reason we define it as a constant is because you can not redefine an array. So if we've set up an array of only 50 stars and we decided to increase num to 51 somewhere in the code, the array can not grow to 51, so an error would occur. You can change this value to whatever you want it to be in this line only. Don't try to change the value of num later on in the code unless you want disaster to occur.
const	num=50;							// Number Of Stars To Draw
Now we create a structure. The word structure sounds intimidating, but it's not really. A structure is a group simple data (variables, etc) representing a larger similar group. In english :) We know that we're keeping track of stars. You'll see that the 7th line below is stars;. We know each star will have 3 values for color, and all these values will be integer values. The 3rd line int r,g,b sets up 3 integer values. One for red (r), one for green (g), and one for blue (b). We know each star will be a different distance from the center of the screen, and can be place at one of 360 different angles from the center. If you look at the 4th line below, we make a floating point value called dist. This will keep track of the distance. The 5th line creates a floating point value called angle. This will keep track of the stars angle.

So now we have this group of data that describes the color, distance and angle of a star on the screen. Unfortunately we have more than one star to keep track of. Instead of creating 50 red values, 50 green values, 50 blue values, 50 distance values and 50 angle values, we just create an array called star. Each number in the star array will hold all of the information in our structure called stars. We make the star array in the 8th line below. If we break down the 8th line: stars star[num]. This is what we come up with. The type of array is going to be stars. stars is a structure. So the array is going to hold all of the information in the structure. The name of the array is star. The number of arrays is [num]. So because num=50, we now have an array called star. Our array stores the elements of the structure stars. Alot easier than keeping track of each star with seperate variables. Which would be a very stupid thing to do, and would not allow us to add remove stars by changing the const value of num.
typedef struct							// Create A Structure For Star
{
    int r, g, b;						// Stars Color
    GLfloat dist;						// Stars Distance From Center
    GLfloat angle;						// Stars Current Angle
}
stars;								// Structures Name Is Stars
stars star[num];						// Make 'star' Array Of 'num' Using Info From The Structure 'stars'
Next we set up variables to keep track of how far away from the stars the viewer is (zoom), and what angle we're seeing the stars from (tilt). We make a variable called spin that will spin the twinkling stars on the z axis, which makes them look like they are spinning at their current location.

loop is a variable we'll use in the program to draw all 50 stars, and texture[1] will be used to store the one b&w texture that we load in. If you wanted more textures, you'd increase the value from one to however many textures you decide to use.
GLfloat	zoom=-15.0f;						// Viewing Distance Away From Stars
GLfloat tilt=90.0f;						// Tilt The View
GLfloat	spin;							// Spin Twinkling Stars

GLuint	loop;							// General Loop Variable
GLuint	texture[1];						// Storage For One Texture

LRESULT	CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);		// Declaration For WndProc
Right after the line above we add code to load in our texture. I shouldn't have to explain the code in great detail. It's the same code we used to load the textures in lesson 6, 7 and 8. The bitmap we load this time is called star.bmp. We generate only one texture using glGenTextures(1, &texture[0]). The texture will use linear filtering.
AUX_RGBImageRec *LoadBMP(char *Filename)			// Loads A Bitmap Image
{
    FILE *File=NULL;					// File Handle

    if (!Filename)						// Make Sure A Filename Was Given
    {
        return NULL;					// If Not Return NULL
    }

    File=fopen(Filename,"r");				// Check To See If The File Exists

    if (File)						// Does The File Exist?
    {
        fclose(File);					// Close The Handle
        return auxDIBImageLoad(Filename);		// Load The Bitmap And Return A Pointer
    }
    return NULL;						// If Load Failed Return NULL
}
This is the section of code that loads the bitmap (calling the code above) and converts it into a textures. Status is used to keep track of whether or not the texture was loaded and created.
int LoadGLTextures()						// Load Bitmaps And Convert To Textures
{
    int Status=FALSE;					// Status Indicator

    AUX_RGBImageRec *TextureImage[1];			// Create Storage Space For The Texture

    memset(TextureImage,0,sizeof(void *)*1);		// Set The Pointer To NULL

    // Load The Bitmap, Check For Errors, If Bitmap's Not Found Quit
    if (TextureImage[0]=LoadBMP("Data/Star.bmp"))
    {
        Status=TRUE;					// Set The Status To TRUE

        glGenTextures(1, &texture[0]);			// Create One Texture

        // Create Linear Filtered Texture
        glBindTexture(GL_TEXTURE_2D, texture[0]);
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
        glTexImage2D(GL_TEXTURE_2D, 0, 3, TextureImage[0]->sizeX, TextureImage[0]->sizeY, 0, GL_RGB, GL_UNSIGNED_BYTE, TextureImage[0]->data);
    }

    if (TextureImage[0])					// If Texture Exists
    {
        if (TextureImage[0]->data)			// If Texture Image Exists
        {
            free(TextureImage[0]->data);		// Free The Texture Image Memory
        }

        free(TextureImage[0]);				// Free The Image Structure
    }

    return Status;						// Return The Status
}
Now we set up OpenGL to render the way we want. We're not going to be using Depth Testing in this project, so make sure if you're using the code from lesson one that you remove glDepthFunc(GL_LEQUAL); and glEnable(GL_DEPTH_TEST); otherwise you'll see some very bad results. We're using texture mapping in this code however so you'll want to make sure you add any lines that are not in lesson 1. You'll notice we're enabling texture mapping, along with blending.
int InitGL(GLvoid)						// All Setup For OpenGL Goes Here
{
    if (!LoadGLTextures())					// Jump To Texture Loading Routine
    {
        return FALSE;					// If Texture Didn't Load Return FALSE
    }

    glEnable(GL_TEXTURE_2D);				// Enable Texture Mapping
    glShadeModel(GL_SMOOTH);				// Enable Smooth Shading
    glClearColor(0.0f, 0.0f, 0.0f, 0.5f);			// Black Background
    glClearDepth(1.0f);					// Depth Buffer Setup
    glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);	// Really Nice Perspective Calculations
    glBlendFunc(GL_SRC_ALPHA,GL_ONE);			// Set The Blending Function For Translucency
    glEnable(GL_BLEND);					// Enable Blending
The following code is new. It sets up the starting angle, distance, and color of each star. Notice how easy it is to change the information in the structure. The loop will go through all 50 stars. To change the angle of star[1] all we have to do is say star[1].angle={some number} . It's that simple!
    for (loop=0; loop<num; loop++)				// Create A Loop That Goes Through All The Stars
    {
        star[loop].angle=0.0f;				// Start All The Stars At Angle Zero
I calculate the distance by taking the current star (which is the value of loop) and dividing it by the maximum amount of stars there can be. Then I multiply the result by 5.0f. Basically what this does is moves each star a little bit farther than the previous star. When loop is 50 (the last star), loop divided by num will be 1.0f. The reason I multiply by 5.0f is because 1.0f*5.0f is 5.0f. 5.0f is the very edge of the screen. I don't want stars going off the screen so 5.0f is perfect. If you set the zoom further into the screen you could use a higher number than 5.0f, but your stars would be alot smaller (because of perspective).

You'll notice that the colors for each star are made up of random values from 0 to 255. You might be wondering how we can use such large values when normally the colors are from 0.0f to 1.0f. When we set the color we'll use glColor4ub instead of glColor4f. ub means Unsigned Byte. A byte can be any value from 0 to 255. In this program it's easier to use bytes than to come up with a random floating point value.
        star[loop].dist=(float(loop)/num)*5.0f;		// Calculate Distance From The Center
        star[loop].r=rand()%256;			// Give star[loop] A Random Red Intensity
        star[loop].g=rand()%256;			// Give star[loop] A Random Green Intensity
        star[loop].b=rand()%256;			// Give star[loop] A Random Blue Intensity
    }
    return TRUE;						// Initialization Went OK
}
The Resize code is the same, so we'll jump to the drawing code. If you're using the code from lesson one, delete the DrawGLScene code, and just copy what I have below. There's only 2 lines of code in lesson one anyways, so there's not a lot to delete.
int DrawGLScene(GLvoid)						// Here's Where We Do All The Drawing
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);	// Clear The Screen And The Depth Buffer
    glBindTexture(GL_TEXTURE_2D, texture[0]);		// Select Our Texture

    for (loop=0; loop<num; loop++)				// Loop Through All The Stars
    {
        glLoadIdentity();				// Reset The View Before We Draw Each Star
        glTranslatef(0.0f,0.0f,zoom);			// Zoom Into The Screen (Using The Value In 'zoom')
        glRotatef(tilt,1.0f,0.0f,0.0f);			// Tilt The View (Using The Value In 'tilt')
Now we move the star. The star starts off in the middle of the screen. The first thing we do is spin the scene on the y axis. If we spin 90 degrees, the x axis will no longer run left to right, it will run into and out of the screen. As an example to help clarify. Imagine you were in the center of a room. Now imagine that the left wall had -x written on it, the front wall had -z written on it, the right wall had +x written on it, and the wall behind you had +z written on it. If the room spun 90 degrees to the right, but you did not move, the wall in front of you would no longer say -z it would say -x. All of the walls would have moved. -z would be in front +z behind, -x would be in front, and +x would be behind you. Make sense? By rotating the scene, we change the direction of the x and z planes.

The next line of code moves to a positive value on the x plane. Normally a positive value on x would move us to the right side of the screen (where +x usually is), but because we've rotated on the y plane, the +x could be anywhere. If we rotated by 180 degrees, it would be on the left side of the screen instead of the right. So when we move forward on the positive x plane, we could be moving left, right, forward or backward.
        glRotatef(star[loop].angle,0.0f,1.0f,0.0f);	// Rotate To The Current Stars Angle
        glTranslatef(star[loop].dist,0.0f,0.0f);	// Move Forward On The X Plane
Now for some tricky code. The star is actually a flat texture. Now if you drew a flat quad in the middle of the screen and texture mapped it, it would look fine. It would be facing you like it should. But if you rotated on the y axis by 90 degrees, the texture would be facing the right and left sides of the screen. All you'd see is a thin line. We don't want that to happen. We want the stars to face the screen all the time, no matter how much we rotate and tilt the screen.

We do this by cancelling any rotations that we've made, just before we draw the star. You cancel the rotations in reverse order. So above we tilted the screen, then we rotated to the stars current angle. In reverse order, we'd un-rotate (new word) the stars current angle. To do this we use the negative value of the angle, and rotate by that. So if we rotated the star by 10 degrees, rotating it back -10 degrees will make the star face the screen once again on that axis. So the first line below cancels the rotation on the y axis. Now we need to until the screen on the x axis. So to do that we just tilt the screen by -tilt. After we've cancelled the x and y rotations, the star will face the screen completely.
        glRotatef(-star[loop].angle,0.0f,1.0f,0.0f);	// Cancel The Current Stars Angle
        glRotatef(-tilt,1.0f,0.0f,0.0f);		// Cancel The Screen Tilt
If twinkle is TRUE, we'll draw a non-spinning star on the screen. To get a different color, we take the maximum number of stars (num) and subtract the current stars number (loop), then subtract 1 because our loop only goes from 0 to num-1. If the result was 10 we'd use the color from star number 10. That way the color of the two stars is usually different. Not a good way to do it, but effective. The last value is the alpha value. The lower the value, the darker the star is.

If twinkle is enabled, each star will be drawn twice. This will slow down the program a little depending on what type of computer you have. If twinkle is enabled, the colors from the two stars will mix together creating some really nice colors. Also because this star does not spin, it will appear as if the stars are animated when twinkling is enabled. (look for yourself if you don't understand what I mean).

Notice how easy it is to add color to the texture. Even though the texture is black and white, it will become whatever color we select before we draw the texture. Also take note that we're using bytes for the color values rather than floating point numbers. Even the alpha value is a byte.
        if (twinkle)					// Twinkling Stars Enabled
        {
            // Assign A Color Using Bytes
            glColor4ub(star[(num-loop)-1].r,star[(num-loop)-1].g,star[(num-loop)-1].b,255);
            glBegin(GL_QUADS);			// Begin Drawing The Textured Quad
                glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f,-1.0f, 0.0f);
                glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f,-1.0f, 0.0f);
                glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f, 1.0f, 0.0f);
                glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f, 1.0f, 0.0f);
            glEnd();				// Done Drawing The Textured Quad
        }
Now we draw the main star. The only difference from the code above is that this star is always drawn, and this star spins on the z axis.
        glRotatef(spin,0.0f,0.0f,1.0f);			// Rotate The Star On The Z Axis
        // Assign A Color Using Bytes
        glColor4ub(star[loop].r,star[loop].g,star[loop].b,255);
        glBegin(GL_QUADS);				// Begin Drawing The Textured Quad
            glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f,-1.0f, 0.0f);
            glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f,-1.0f, 0.0f);
            glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f, 1.0f, 0.0f);
            glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f, 1.0f, 0.0f);
        glEnd();					// Done Drawing The Textured Quad
Here's where we do all the movement. We spin the normal stars by increasing the value of spin. Then we change the angle of each star. The angle of each star is increased by loop/num. What this does is spins the stars that are farther from the center faster. The stars closer to the center spin slower. Finally we decrease the distance each star is from the center of the screen. This makes the stars look as if they are being sucked into the middle of the screen.
        spin+=0.01f;					// Used To Spin The Stars
        star[loop].angle+=float(loop)/num;		// Changes The Angle Of A Star
        star[loop].dist-=0.01f;				// Changes The Distance Of A Star
The lines below check to see if the stars have hit the center of the screen or not. When a star hits the center of the screen it's given a new color, and is moved 5 units from the center, so it can start it's journey back to the center as a new star.
        if (star[loop].dist<0.0f)			// Is The Star In The Middle Yet
        {
            star[loop].dist+=5.0f;			// Move The Star 5 Units From The Center
            star[loop].r=rand()%256;		// Give It A New Red Value
            star[loop].g=rand()%256;		// Give It A New Green Value
            star[loop].b=rand()%256;		// Give It A New Blue Value
        }
    }
    return TRUE;						// Everything Went OK
}
Now we're going to add code to check if any keys are being pressed. Go down to WinMain(). Look for the line SwapBuffers(hDC). We'll add our key checking code right under that line. lines of code.

The lines below check to see if the T key has been pressed. If it has been pressed and it's not being held down the following will happen. If twinkle is FALSE, it will become TRUE. If it was TRUE, it will become FALSE. Once T is pressed tp will become TRUE. This prevents the code from running over and over again if you hold down the T key.
        SwapBuffers(hDC);				// Swap Buffers (Double Buffering)
        if (keys['T'] && !tp)				// Is T Being Pressed And Is tp FALSE
        {
            tp=TRUE;				// If So, Make tp TRUE
            twinkle=!twinkle;			// Make twinkle Equal The Opposite Of What It Is
        }
The code below checks to see if you've let go of the T key. If you have, it makes tp=FALSE. Pressing the T key will do nothing unless tp is FALSE, so this section of code is very important.
        if (!keys['T'])					// Has The T Key Been Released
        {
            tp=FALSE;				// If So, make tp FALSE
        }
The rest of the code checks to see if the up arrow, down arrow, page up or page down keys are being pressed.
        if (keys[VK_UP])				// Is Up Arrow Being Pressed
        {
            tilt-=0.5f;				// Tilt The Screen Up
        }

        if (keys[VK_DOWN])				// Is Down Arrow Being Pressed
        {
            tilt+=0.5f;				// Tilt The Screen Down
        }

        if (keys[VK_PRIOR])				// Is Page Up Being Pressed
        {
            zoom-=0.2f;				// Zoom Out
        }

        if (keys[VK_NEXT])				// Is Page Down Being Pressed
        {
            zoom+=0.2f;				// Zoom In
        }
Like all the previous tutorials, make sure the title at the top of the window is correct.
        if (keys[VK_F1])				// Is F1 Being Pressed?
        {
            keys[VK_F1]=FALSE;			// If So Make Key FALSE
            KillGLWindow();				// Kill Our Current Window
            fullscreen=!fullscreen;			// Toggle Fullscreen / Windowed Mode
            // Recreate Our OpenGL Window
            if (!CreateGLWindow("NeHe's Textures, Lighting & Keyboard Tutorial",640,480,16,fullscreen))
            {
                return 0;			// Quit If Window Was Not Created
            }
        }
    }
}
In this tutorial I have tried to explain in as much detail how to load in a gray scale bitmap image, remove the black space around the image (using blending), add color to the image, and move the image around the screen in 3D. I've also shown you how to create beautiful colors and animation by overlapping a second copy of the bitmap on top of the original bitmap. Once you have a good understanding of everything I've taught you up till now, you should have no problems making 3D demos ofyour own. All the basics have been covered!


Lesson 10 - Loading And Moving Through A 3D World

Lesson 10
This tutorial was created by Lionel Brits (ßetelgeuse). This lesson only explains the sections of code that have been added. By adding just the lines below, the program will not run. If you're interested to know where each of the lines of code below go, download the source code, and follow through it, as you read the tutorial.

Welcome to the infamous Tutorial 10. By now you have a spinning cube or a couple of stars, and you have the basic feel for 3D programming. But wait! Don't run off and start to code Quake IV just yet. Spinning cubes just aren't going to make cool deathmatch opponents :-) These days you need a large, complicated and dynamic 3D world with 6 degrees of freedom and fancy effects like mirrors, portals, warping and of course, high framerates. This tutorial explains the basic "structure" of a 3D world, and also how to move around in it.

Data structure

While it is perfectly alright to code a 3D environment as a long series of numbers, it becomes increasingly hard as the complexity of the environment goes up. For this reason, we must catagorize our data into a more workable fashion. At the top of our list is the sector. Each 3D world is basically a collection of sectors. A sector can be a room, a cube, or any enclosed volume.
typedef struct tagSECTOR						// Build Our Sector Structure
{
    int numtriangles;						// Number Of Triangles In Sector
    TRIANGLE* triangle;						// Pointer To Array Of Triangles
} SECTOR;								// Call It SECTOR
A sector holds a series of polygons, so the next catagory will be the triangle (we will stick to triangles for now, as they are alot easier to code.)
typedef struct tagTRIANGLE						// Build Our Triangle Structure
{
    VERTEX vertex[3];						// Array Of Three Vertices
} TRIANGLE;								// Call It TRIANGLE
The triangle is basically a polygon made up of vertices (plural of vertex), which brings us to our last catagory. The vertex holds the real data that OpenGL is interested in. We define each point on the triangle with it's position in 3D space (x, y, z) as well as it's texture coordinates (u, v).
typedef struct tagVERTEX						// Build Our Vertex Structure
{
    float x, y, z;							// 3D Coordinates
    float u, v;							// Texture Coordinates
} VERTEX;								// Call It VERTEX
Loading files

Storing our world data inside our program makes our program quite static and boring. Loading worlds from disk, however, gives us much more flexibility as we can test different worlds without having to recompile our program. Another advantage is that the user can interchange worlds and modify them without having to know the in's and out's of our program. The type of data file we are going to be using will be text. This makes for easy editing, and less code. We will leave binary files for a later date.

The question is, how do we get our data from our file. First, we create a new function called SetupWorld(). We define our file as filein, and we open it for read-only access. We must also close our file when we are done. Let us take a look at the code so far:
// Previous Declaration: char* worldfile = "data\\world.txt";
void SetupWorld()							// Setup Our World
{
    FILE *filein;							// File To Work With
    filein = fopen(worldfile, "rt");				// Open Our File

    ...
    (read our data)
    ...

    fclose(filein);							// Close Our File
    return;								// Jump Back
}
Our next challenge is to read each individual line of text into a variable. This can be done in a number of ways. One problem is that not all lines in the file will contain meaningful information. Blank lines and comments shouldn't be read. Let us create a function called readstr(). This function will read one meaningful line of text into an initialised string. Here's the code:
void readstr(FILE *f,char *string)					// Read In A String

{
    do	return;							// Start A Loop
    {
        fgets(string, 255, f);					// Read One Line
    } while ((string[0] == '/') || (string[0] == '\n'));		// See If It Is Worthy Of Processing
    return;								// Jump Back
}
Next, we must read in the sector data. This lesson will deal with one sector only, but it is easy to implement a multi-sector engine. Let us turn back to SetupWorld().Our program must know how many triangles are in our sector. In our data file, we will define the number of triangles as follows:
NUMPOLLIES n
Here's the code to read the number of triangles:
int numtriangles;							// Number Of Triangles In Sector
char oneline[255];							// String To Store Data In
...
readstr(filein,oneline);						// Get Single Line Of Data
sscanf(oneline, "NUMPOLLIES %d\n", &numtriangles);			// Read In Number Of Triangles
The rest of our world-loading process will use the same process. Next, we initialize our sector and read some data into it:
// Previous Declaration: SECTOR sector1;
char oneline[255];							// String To Store Data In
int numtriangles;							// Number Of Triangles In Sector
float x, y, z, u, v;							// 3D And Texture Coordinates
...
sector1.triangle = new TRIANGLE[numtriangles];				// Allocate Memory For numtriangles And Set Pointer
sector1.numtriangles = triangles;					// Define The Number Of Triangles In Sector 1
// Step Through Each Triangle In Sector
for (int triloop = 0; triloop < numtriangles; triloop++)		// Loop Through All The Triangles
{
    // Step Through Each Vertex In Triangle
    for (int vertloop = 0; vertloop < 3; vertloop++)		// Loop Through All The Vertices
    {
        readstr(filein,oneline);				// Read String To Work With
        // Read Data Into Respective Vertex Values
        sscanf(oneline, "%f %f %f %f %f %f %f", &x, &y, &z, &u, &v);
        // Store Values Into Respective Vertices
        sector1.triangle[triloop].vertex[vertloop].x = x;	// Sector 1, Triangle triloop, Vertice vertloop, x Value=x
        sector1.triangle[triloop].vertex[vertloop].y = y;	// Sector 1, Triangle triloop, Vertice vertloop, y Value=y
        sector1.triangle[triloop].vertex[vertloop].z = z;	// Sector 1, Triangle triloop, Vertice vertloop, z Value=z
        sector1.triangle[triloop].vertex[vertloop].u = u;	// Sector 1, Triangle triloop, Vertice vertloop, u Value=u
        sector1.triangle[triloop].vertex[vertloop].v = v;	// Sector 1, Triangle triloop, Vertice vertloop, v Value=v
    }
}
Each triangle in our data file is declared as follows:
X1 Y1 Z1 U1 V1
X2 Y2 Z2 U2 V2
X3 Y3 Z3 U3 V3
Displaying Worlds

Now that we can load our sector into memory, we need to display it on screen. So far we have done some minor rotations and translations, but our camera was always centered at the origin (0,0,0). Any good 3D engine would have the user be able to walk around and explore the world, and so will ours. One way of doing this is to move the camera around and draw the 3D environment relative to the camera position. This is slow and hard to code. What we will do is this:

  1. Rotate and translate the camera position according to user commands
  2. Rotate the world around the origin in the opposite direction of the camera rotation (giving the illusion that the camera has been rotated)
  3. Translate the world in the opposite manner that the camera has been translated (again, giving the illusion that the camera has moved)
This is pretty simple to implement. Let's start with the first stage (Rotation and translation of the camera).
if (keys[VK_RIGHT])							// Is The Right Arrow Being Pressed?
{
    yrot -= 1.5f;							// Rotate The Scene To The Left
}

if (keys[VK_LEFT])							// Is The Left Arrow Being Pressed?
{
    yrot += 1.5f;							// Rotate The Scene To The Right
}

if (keys[VK_UP])							// Is The Up Arrow Being Pressed?
{
    xpos -= (float)sin(yrot*piover180) * 0.05f;			// Move On The X-Plane Based On Player Direction
    zpos -= (float)cos(yrot*piover180) * 0.05f;			// Move On The Z-Plane Based On Player Direction
    if (walkbiasangle >= 359.0f)					// Is walkbiasangle>=359?
    {
        walkbiasangle = 0.0f;					// Make walkbiasangle Equal 0
    }
    else								// Otherwise
    {
         walkbiasangle+= 10;					// If walkbiasangle < 359 Increase It By 10
    }
    walkbias = (float)sin(walkbiasangle * piover180)/20.0f;		// Causes The Player To Bounce
}

if (keys[VK_DOWN])							// Is The Down Arrow Being Pressed?
{
    xpos += (float)sin(yrot*piover180) * 0.05f;			// Move On The X-Plane Based On Player Direction
    zpos += (float)cos(yrot*piover180) * 0.05f;			// Move On The Z-Plane Based On Player Direction
    if (walkbiasangle <= 1.0f)					// Is walkbiasangle<=1?
    {
        walkbiasangle = 359.0f;					// Make walkbiasangle Equal 359
    }
    else								// Otherwise
    {
        walkbiasangle-= 10;					// If walkbiasangle > 1 Decrease It By 10
    }
    walkbias = (float)sin(walkbiasangle * piover180)/20.0f;		// Causes The Player To Bounce
}
That was fairly simple. When either the left or right cursor key is pressed, the rotation variable yrot is incremented or decremented appropriatly. When the forward or backwards cursor key is pressed, a new location for the camera is calculated using the sine and cosine calculations (some trigonometry required :-). Piover180 is simply a conversion factor for converting between degrees and radians.

Next you ask me: What is this walkbias? It's a word I invented :-) It's basically an offset that occurs when a person walks around (head bobbing up and down like a buoy. It simply adjusts the camera's Y position with a sine wave. I had to put this in, as simply moving forwards and backwards didn't look to great.

Now that we have these variables down, we can proceed with steps two and three. This will be done in the display loop, as our program isn't complicated enough to merit a seperate function.
int DrawGLScene(GLvoid)							// Draw The OpenGL Scene
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);		// Clear Screen And Depth Buffer
    glLoadIdentity();						// Reset The Current Matrix

    GLfloat x_m, y_m, z_m, u_m, v_m;				// Floating Point For Temp X, Y, Z, U And V Vertices
    GLfloat xtrans = -xpos;						// Used For Player Translation On The X Axis
    GLfloat ztrans = -zpos;						// Used For Player Translation On The Z Axis
    GLfloat ytrans = -walkbias-0.25f;				// Used For Bouncing Motion Up And Down
    GLfloat sceneroty = 360.0f - yrot;				// 360 Degree Angle For Player Direction

    int numtriangles;						// Integer To Hold The Number Of Triangles

    glRotatef(lookupdown,1.0f,0,0);					// Rotate Up And Down To Look Up And Down
    glRotatef(sceneroty,0,1.0f,0);					// Rotate Depending On Direction Player Is Facing

    glTranslatef(xtrans, ytrans, ztrans);				// Translate The Scene Based On Player Position
    glBindTexture(GL_TEXTURE_2D, texture[filter]);			// Select A Texture Based On filter

    numtriangles = sector1.numtriangles;				// Get The Number Of Triangles In Sector 1

    // Process Each Triangle
    for (int loop_m = 0; loop_m < numtriangles; loop_m++)		// Loop Through All The Triangles
    {
        glBegin(GL_TRIANGLES);					// Start Drawing Triangles
            glNormal3f( 0.0f, 0.0f, 1.0f);			// Normal Pointing Forward
            x_m = sector1.triangle[loop_m].vertex[0].x;	// X Vertex Of 1st Point
            y_m = sector1.triangle[loop_m].vertex[0].y;	// Y Vertex Of 1st Point
            z_m = sector1.triangle[loop_m].vertex[0].z;	// Z Vertex Of 1st Point
            u_m = sector1.triangle[loop_m].vertex[0].u;	// U Texture Coord Of 1st Point
            v_m = sector1.triangle[loop_m].vertex[0].v;	// V Texture Coord Of 1st Point
            glTexCoord2f(u_m,v_m); glVertex3f(x_m,y_m,z_m);	// Set The TexCoord And Vertice

            x_m = sector1.triangle[loop_m].vertex[1].x;	// X Vertex Of 2nd Point
            y_m = sector1.triangle[loop_m].vertex[1].y;	// Y Vertex Of 2nd Point
            z_m = sector1.triangle[loop_m].vertex[1].z;	// Z Vertex Of 2nd Point
            u_m = sector1.triangle[loop_m].vertex[1].u;	// U Texture Coord Of 2nd Point
            v_m = sector1.triangle[loop_m].vertex[1].v;	// V Texture Coord Of 2nd Point
            glTexCoord2f(u_m,v_m); glVertex3f(x_m,y_m,z_m);	// Set The TexCoord And Vertice

            x_m = sector1.triangle[loop_m].vertex[2].x;	// X Vertex Of 3rd Point
            y_m = sector1.triangle[loop_m].vertex[2].y;	// Y Vertex Of 3rd Point
            z_m = sector1.triangle[loop_m].vertex[2].z;	// Z Vertex Of 3rd Point
            u_m = sector1.triangle[loop_m].vertex[2].u;	// U Texture Coord Of 3rd Point
            v_m = sector1.triangle[loop_m].vertex[2].v;	// V Texture Coord Of 3rd Point
            glTexCoord2f(u_m,v_m); glVertex3f(x_m,y_m,z_m);	// Set The TexCoord And Vertice
        glEnd();						// Done Drawing Triangles
    }
    return TRUE;							// Jump Back
}
And voila! We have drawn our first frame. This isn't exactly Quake but hey, we aren't exactly Carmack's or Abrash's. While running the program, you may want to press F, B, PgUp and PgDown to see added effects. PgUp/Down simply tilts the camera up and down (the same process as panning from side to side.) The texture included is simply a mud texture with a bumpmap of my school ID picture; that is, if NeHe decided to keep it :-).

So now you're probably thinking where to go next. Don't even consider using this code to make a full-blown 3D engine, since that's not what it's designed for. You'll probably want more than one sector in your game, especially if you're going to implement portals. You'll also want to have polygons with more than 3 vertices, again, essential for portal engines. My current implementation of this code allows for multiple sector loading and does backface culling (not drawing polygons that face away from the camera). I'll write a tutorial on that soon, but as it uses alot of math, I'm going to write a tutorial on matrices first.

NeHe (05/01/00): I've added FULL comments to each of the lines listed in this tutorial. Hopefully things make more sense now. Only a few of the lines had comments after them, now they all do :)

Please, if you have any problems with the code/tutorial (this is my first tutorial, so my explanations are a little vague), don't hesitate to email me mailto:iam@cadvision.com Until next time,

Lionel Brits (ßetelgeuse)


Lesson 11 - OpenGL Flag Effect

Lesson 11
Well greetings all. For those of you that want to see what we are doing here, you can check it out at the end of my demo/hack Worthless! I am bosco and I will do my best to teach you guys how to do the animated, sine-wave picture. This tutorial is based on NeHe's tutorial #6 and you should have at least that much knowledge. You should download the source package and place the bitmap I've included in a directory called data where your source code is. Or use your own texture if it's an appropriate size to be used as a texture with OpenGL.

First things first. Open Tutorial #6 in Visual C++ and add the following include statement right after the other #include statements. The #include below allows us to work with complex math such as sine and cosine.
#include <math.h>						// For The Sin() Function
We'll use the array points to store the individual x, y & z coordinates of our grid. The grid is 45 points by 45 points, which in turn makes 44 quads x 44 quads. wiggle_count will be used to keep track of how fast the texture waves. Every three frames looks pretty good, and the variable hold will store a floating point value to smooth out the waving of the flag. These lines can be added at the top of the program, somewhere under the last #include line, and before the GLuint texture[1] line.
float points[ 45 ][ 45 ][3];					// The Array For The Points On The Grid Of Our "Wave"
int wiggle_count = 0;						// Counter Used To Control How Fast Flag Waves
GLfloat hold;							// Temporarily Holds A Floating Point Value
Move down the the LoadGLTextures() procedure. We want to use the texture called Tim.bmp. Find LoadBMP("Data/NeHe.bmp") and replace it with LoadBMP("Data/Tim.bmp").
    if (TextureImage[0]=LoadBMP("Data/Tim.bmp"))		// Load The Bitmap
Now add the following code to the bottom of the InitGL() function before return TRUE.
    glPolygonMode( GL_BACK, GL_FILL );			// Back Face Is Filled In
    glPolygonMode( GL_FRONT, GL_LINE );			// Front Face Is Drawn With Lines
These simply specify that we want back facing polygons to be filled completely and that we want front facing polygons to be outlined only. Mostly personal preference at this point. Has to do with the orientation of the polygon or the direction of the vertices. See the Red Book for more information on this. Incidentally, while I'm at it, let me plug the book by saying it's one of the driving forces behind me learning OpenGL, not to mention NeHe's site! Thanks NeHe. Buy The Programmer's Guide to OpenGL from Addison-Wesley. It's an invaluable resource as far as I'm concerned. Ok, back to the tutorial.

Right below the code above, and above return TRUE, add the following lines.
    // Loop Through The X Plane
    for(float  float_x = 0.0f; float_x < 9.0f; float_x +=  0.2f )
    {
        // Loop Through The Y Plane
        for( float float_y = 0.0f; float_y < 9.0f; float_y += 0.2f)
        {
            // Apply The Wave To Our Mesh
            points[ int(float_x*5.0f) ][ int(float_y*5.0f) ][0] = float_x - 4.4f;
            points[ int(float_x*5.0f) ][ int(float_y*5.0f) ][1] = float_y - 4.4f;
            points[ int(float_x*5.0f) ][ int(float_y*5.0f) ][2] = float(sin(((float_x*40.0f)/360.0f)*3.14159f*2.0f ));
        }
    }
Ok, before I said our grid is 45 points by 45 points. Well to accomplish this without having to push our scene back too far, we merely use a world coordinate of 9x9 and space the points 0.2 units apart.

The two loops above initialize the points on our grid. I initialize variables in my loop to localize them in my mind as merely loop variables. Not sure it's kosher. To come up with the array reference we have to multiply our loop variable by 5 ( i.e. 45 / 9 = 5 ). I subtract 4.4 from each of the coordinates to put the "wave" centered on the origin. The same effect could be accomplished with a translate, but I prefer this method.

The final value points[x][y][2] statement is our sine value. The sin() function requires radians. We take our degree value, which is our float_x multiplied by 40.0f. Once we have that, to convert to radians we take the degree, divide by 360.0f, multiply by pi, or an approximation and then multiply by 2.0f.

I'm going to re-write the DrawGLScene function from scratch so clean it out and it replace with the following code.
int DrawGLScene(GLvoid)						// Draw Our GL Scene
{
    int x, y;						// Loop Variables
    float float_x, float_y, float_xb, float_yb;		// Used To Break The Flag Into Tiny Quads
Different variables used for controlling the loops. See the code below but most of these serve no "specific" purpose other than controlling loops and storing temporary values.
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);	// Clear The Screen And Depth Buffer
    glLoadIdentity();					// Reset The Current Matrix

    glTranslatef(0.0f,0.0f,-12.0f);				// Translate 17 Units Into The Screen

    glRotatef(xrot,1.0f,0.0f,0.0f);				// Rotate On The X Axis
    glRotatef(yrot,0.0f,1.0f,0.0f);				// Rotate On The Y Axis
    glRotatef(zrot,0.0f,0.0f,1.0f);				// Rotate On The Z Axis

    glBindTexture(GL_TEXTURE_2D, texture[0]);		// Select Our Texture
You've seen all of this before as well. Same as in tutorial #6 except I merely push my scene back away from the camera a bit more.
    glBegin(GL_QUADS);					// Start Drawing Our Quads
    for( x = 0; x < 44; x++ )				// Loop Through The X Plane 0-44 (45 Points)
    {
        for( y = 0; y < 44; y++ )			// Loop Through The Y Plane 0-44 (45 Points)
        {
Merely starts the loop to draw our polygons. I use integers here to keep from having to use the int() function as I did earlier to get the array reference returned as an integer.
            float_x = float(x)/44.0f;		// Create A Floating Point X Value
            float_y = float(y)/44.0f;		// Create A Floating Point Y Value
            float_xb = float(x+1)/44.0f;		// Create A Floating Point Y Value+0.0227f
            float_yb = float(y+1)/44.0f;		// Create A Floating Point Y Value+0.0227f
We use the four variables above for the texture coordinates. Each of our polygons (square in the grid), has a 1/44 x 1/44 section of the texture mapped on it. The loops will specify the lower left vertex and then we just add to it accordingly to get the other three ( i.e. x+1 or y+1 ).
            glTexCoord2f( float_x, float_y);	// First Texture Coordinate (Bottom Left)
            glVertex3f( points[x][y][0], points[x][y][1], points[x][y][2] );

            glTexCoord2f( float_x, float_yb );	// Second Texture Coordinate (Top Left)
            glVertex3f( points[x][y+1][0], points[x][y+1][1], points[x][y+1][2] );

            glTexCoord2f( float_xb, float_yb );	// Third Texture Coordinate (Top Right)
            glVertex3f( points[x+1][y+1][0], points[x+1][y+1][1], points[x+1][y+1][2] );

            glTexCoord2f( float_xb, float_y );	// Fourth Texture Coordinate (Bottom Right)
            glVertex3f( points[x+1][y][0], points[x+1][y][1], points[x+1][y][2] );
        }
    }
    glEnd();						// Done Drawing Our Quads
The lines above merely make the OpenGL calls to pass all the data we talked about. Four separate calls to each glTexCoord2f() and glVertex3f(). Continue with the following. Notice the quads are drawn clockwise. This means the face you see initially will be the back. The back is filled in. The front is made up of lines.

If you drew in a counter clockwise order the face you'd initially see would be the front face, meaning you would see the grid type texture instead of the filled in face.
    if( wiggle_count == 2 )					// Used To Slow Down The Wave (Every 2nd Frame Only)
    {
If we've drawn two scenes, then we want to cycle our sine values giving us "motion".
        for( y = 0; y < 45; y++ )			// Loop Through The Y Plane
        {
            hold=points[0][y][2];			// Store Current Value One Left Side Of Wave
            for( x = 0; x < 44; x++)		// Loop Through The X Plane
            {
                // Current Wave Value Equals Value To The Right
                points[x][y][2] = points[x+1][y][2];
            }
            points[44][y][2]=hold;			// Last Value Becomes The Far Left Stored Value
        }
        wiggle_count = 0;				// Set Counter Back To Zero
    }
    wiggle_count++;						// Increase The Counter
What we do here is store the first value of each line, we then move the wave to the left one, causing the image to wave. The value we stored is then added to the end to create a never ending wave across the face of the texture. Then we reset the counter wiggle_count to keep our animation going.

The above code was modified by NeHe (Feb 2000), to fix a flaw in the ripple going across the surface of the texture. The ripple is now smooth.
    xrot+=0.3f;						// Increase The X Rotation Variable
    yrot+=0.2f;						// Increase The Y Rotation Variable
    zrot+=0.4f;						// Increase The Z Rotation Variable

    return TRUE;						// Jump Back
}
Standard NeHe rotation values. :) And that's it folks. Compile and you should have a nice rotating bitmapped "wave". I'm not sure what else to say except, whew.. This was LONG! But I hope you guys can follow it/get something out of it. If you have any questions, want me to clear something up or tell me how god awful, lol, I code, then send me a note.

This was a blast, but very energy/time consuming. It makes me appreciate the likes of NeHe ALOT more now. Thanks all.

Bosco (bosco4@home.com)


Lesson 12 - Display Lists

Lesson 12
In this tutorial I'll teach you how to use Display Lists. Not only do display lists speed up your code, they also cut down on the number of lines of code you need to write when creating a simple GL scene.

For example. Lets say you're making the game asteroids. Each level starts off with at least 2 asteroids. So you sit down with your graph paper (grin), and figure out how to make a 3D asteroid. Once you have everything figured out, you build the asteroid in OpenGL using Polygons or Quads. Lets say the asteroid is octagonal (8 sides). If you're smart you'll create a loop, and draw the asteroid once inside the loop. You'll end up with roughly 18 lines or more of code to make the asteroid. Creating the asteroid each time it's drawn to the screen is hard on your system. Once you get into more complex objects you'll see what I mean.

So what's the solution? Display Lists!!! By using a display list, you create the object just once. You can texture map it, color it, whatever you want to do. You give the display list a name. Because it's an asteroid we'll call the display list 'asteroid'. Now any time I want to draw the textured / colored asteroid on the screen, all I have to do is call glCallList(asteroid). the premade asteroid will instantly appear on the screen. Because the asteroid has already built in the display list, OpenGL doesn't have to figure out how to build it. It's prebuilt in memory. This takes alot of strain off your processor and allows your programs to run alot faster!

So are you ready to learn? :) We'll call this the Q-Bert Display List demo. What you'll end up with is a Q-Bert type screen made up of 15 cubes. Each cube is made up of a TOP, and a BOX. The top will be a seperate display list so that we can color it a darker shade. The box is a cube without the top :)

This code is based around lesson 6. I'll rewrite most of the program so it's easier to see where I've made changes. The follow lines of code are standard code used in just about all the lessons.
#include <windows.h>					// Header File For Windows
#include <stdio.h>					// Header File For Standard Input/Output
#include <gl\gl.h>					// Header File For The OpenGL32 Library
#include <gl\glu.h>					// Header File For The GLu32 Library
#include <gl\glaux.h>					// Header File For The GLaux Library

HDC		hDC=NULL;				// Private GDI Device Context
HGLRC		hRC=NULL;				// Permanent Rendering Context
HWND		hWnd=NULL;				// Holds Our Window Handle
HINSTANCE	hInstance;				// Holds The Instance Of The Application

bool	keys[256];					// Array Used For The Keyboard Routine
bool	active=TRUE;					// Window Active Flag Set To TRUE By Default
bool	fullscreen=TRUE;				// Fullscreen Flag Set To Fullscreen Mode By Default
Now we set up our variables. First we set up storage for one texture. Then we create two new variables for our 2 display lists. These variable will act as pointers to where the display list is stored in ram. They're called box and top.
,
After that we have 2 variables called xloop and yloop which are used to position the cubes on the screen and 2 variables called xrot and yrot that are used to rotate the cubes on the x axis and y axis.
GLuint	texture[1];					// Storage For One Texture
GLuint	box;						// Storage For The Display List
GLuint	top;						// Storage For The Second Display List
GLuint	xloop;						// Loop For X Axis
GLuint	yloop;						// Loop For Y Axis

GLfloat	xrot;						// Rotates Cube On The X Axis
GLfloat	yrot;						// Rotates Cube On The Y Axis
Next we create two color arrays. The first one boxcol stores the color values for Bright Red, Orange, Yellow, Green and Blue. Each value inside the {}'s represent a red, green and blue value. Each group of {}'s is a specific color.

The second color array we create is for Dark Red, Dark Orange, Dark Yellow, Dark Green and Dark Blue. The dark colors will be used to draw the top of the boxes. We want the lid to be darker than the rest of the box.
static GLfloat boxcol[5][3]=				// Array For Box Colors
{
    // Bright:  Red, Orange, Yellow, Green, Blue
    {1.0f,0.0f,0.0f},{1.0f,0.5f,0.0f},{1.0f,1.0f,0.0f},{0.0f,1.0f,0.0f},{0.0f,1.0f,1.0f}
};

static GLfloat topcol[5][3]=				// Array For Top Colors
{
    // Dark:  Red, Orange, Yellow, Green, Blue
    {.5f,0.0f,0.0f},{0.5f,0.25f,0.0f},{0.5f,0.5f,0.0f},{0.0f,0.5f,0.0f},{0.0f,0.5f,0.5f}
};

LRESULT	CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);	// Declaration For WndProc
Now we build the actual Display List. If you notice, all the code to build the box is in the first list, and all the code to build the top is in the other list. I'll try to explain this section in alot of detail.
GLvoid BuildList()					// Build Box Display List
{
We start off by telling OpenGL we want to build 2 lists. glGenLists(2) creates room for the two lists, and returns a pointer to the first list. 'box' will hold the location of the first list. Whenever we call box the first list will be drawn.
    box=glGenLists(2);				// Building Two Lists
Now we're going to build the first list. We've already freed up room for two lists, and we know that box points to the area we're going to store the first list. So now all we have to do is tell OpenGL where the list should go, and what type of list to make.

We use the command glNewList() to do the job. You'll notice box is the first parameter. This tells OpenGL to store the list in the memory location that box points to. The second parameter GL_COMPILE tells OpenGL we want to prebuild the list in memory so that OpenGL doesn't have to figure out how to create the object ever time we draw it.

GL_COMPILE is similar to programming. If you write a program, and load it into your compiler, you have to compile it every time you want to run it. If it's already compiled into an .EXE file, all you have to do is click on the .exe to run it. No compiling needed. Once GL has compiled the display list, it's ready to go, no more compiling required. This is where we get the speed boost from using display lists.
    glNewList(box,GL_COMPILE);			// New Compiled box Display List
The next section of code draws the box without the top. It wont appear on the screen. It will be stored in the display list.

You can put just about any command you want between glNewList() and glEndList(). You can set colors, you can change textures, etc. The only type of code you CAN'T add is code that would change the display list on the fly. Once the display list is built, you CAN'T change it.

If you added the line glColor3ub(rand()%255,rand()%255,rand()%255) into the code below, you might think that each time you draw the object to the screen it will be a different color. But because the list is only CREATED once, the color will not change each time you draw it to the screen. Whatever color the object was when it was first made is the color it will remain.

If you want to change the color of the display list, you have to change it BEFORE you draw the display list to the screen. I'll explain more on this later.
        glBegin(GL_QUADS);							// Start Drawing Quads
            // Bottom Face
            glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f, -1.0f, -1.0f);	// Top Right Of The Texture and Quad
            glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f, -1.0f, -1.0f);	// Top Left Of The Texture and Quad
            glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f,  1.0f);	// Bottom Left Of The Texture and Quad
            glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f,  1.0f);	// Bottom Right Of The Texture and Quad
            // Front Face
            glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f, -1.0f,  1.0f);	// Bottom Left Of The Texture and Quad
            glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f, -1.0f,  1.0f);	// Bottom Right Of The Texture and Quad
            glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f,  1.0f,  1.0f);	// Top Right Of The Texture and Quad
            glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f,  1.0f,  1.0f);	// Top Left Of The Texture and Quad
            // Back Face
            glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f, -1.0f);	// Bottom Right Of The Texture and Quad
            glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f,  1.0f, -1.0f);	// Top Right Of The Texture and Quad
            glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f,  1.0f, -1.0f);	// Top Left Of The Texture and Quad
            glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f, -1.0f);	// Bottom Left Of The Texture and Quad
            // Right face
            glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f, -1.0f, -1.0f);	// Bottom Right Of The Texture and Quad
            glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f,  1.0f, -1.0f);	// Top Right Of The Texture and Quad
            glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f,  1.0f,  1.0f);	// Top Left Of The Texture and Quad
            glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f,  1.0f);	// Bottom Left Of The Texture and Quad
            // Left Face
            glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f, -1.0f, -1.0f);	// Bottom Left Of The Texture and Quad
            glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f,  1.0f);	// Bottom Right Of The Texture and Quad
            glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f,  1.0f,  1.0f);	// Top Right Of The Texture and Quad
            glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f,  1.0f, -1.0f);	// Top Left Of The Texture and Quad
        glEnd();								// Done Drawing Quads
We tell OpenGL we're done making out list with the command glEndList(). Anything between glNewList() and glEndList is part of the Display List, anything before glNewList() or after glEndList() is not part of the current display list.
    glEndList();									// Done Building The box List
Now we'll make our second display list. To find out where the second display list is stored in memory, we take the value of the old display list (box) and add one to it. The code below will make 'top' equal the location of the second display list.
    top=box+1;									// top List Value Is box List Value +1
Now that we know where to store the second display list, we can build it. We do this the same way we built the first display list, but this time we tell OpenGL to store the list at 'top' instead of 'box'.
    glNewList(top,GL_COMPILE);							// New Compiled top Display List
The following section of code just draws the top of the box. It's a simple quad drawn on the Z plane.
        glBegin(GL_QUADS);							// Start Drawing Quad
            // Top Face
            glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f,  1.0f, -1.0f);	// Top Left Of The Texture and Quad
            glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f,  1.0f,  1.0f);	// Bottom Left Of The Texture and Quad
            glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f,  1.0f,  1.0f);	// Bottom Right Of The Texture and Quad
            glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f,  1.0f, -1.0f);	// Top Right Of The Texture and Quad
        glEnd();								// Done Drawing Quad
Again we tell OpenGL we're done building our second list with the command glEndList(). That's it. We've successfully created 2 display lists.
    glEndList();									// Done Building The top Display List
}
The bitmap/texture building code is the same code we used in previous tutorials to load and build a texture. We want a texture that we can map onto all 6 sides of each cube. I've decided to use mipmapping to make the texture look real smooth. I hate seeing pixels :) The name of the texture to load is called 'cube.bmp'. It's stored in a directory called data. Find LoadBMP and change that line to look like the line below.
    if (TextureImage[0]=LoadBMP("Data/Cube.bmp"))		// Load The Bitmap
Resizing code is exactly the same as the code in Lesson 6.

The init code only has a few changes. I've added the line BuildList(). This will jump to the section of code that builds the display lists. Notice that BuildList() is after LoadGLTextures(). It's important to know the order things should go in. First we build the textures, so when we create our display lists, there's a texture already created that we can map onto the cube.
int InitGL(GLvoid)						// All Setup For OpenGL Goes Here
{
    if (!LoadGLTextures())					// Jump To Texture Loading Routine
    {
        return FALSE;					// If Texture Didn't Load Return FALSE
    }
    BuildLists();						// Jump To The Code That Creates Our Display Lists
    glEnable(GL_TEXTURE_2D);				// Enable Texture Mapping
    glShadeModel(GL_SMOOTH);				// Enable Smooth Shading
    glClearColor(0.0f, 0.0f, 0.0f, 0.5f);			// Black Background
    glClearDepth(1.0f);					// Depth Buffer Setup
    glEnable(GL_DEPTH_TEST);				// Enables Depth Testing
    glDepthFunc(GL_LEQUAL);					// The Type Of Depth Testing To Do
The next three lines of code enable quick and dirty lighting. Light0 is predefined on most video cards, so it saves us the hassle of setting up lights. After we enable light0 we enable lighting. If light0 isn't working on your video card (you see blackness), just disable lighting.

The last line GL_COLOR_MATERIAL lets us add color to texture maps. If we don't enable material coloring, the textures will always be their original color. glColor3f(r,g,b) will have no affect on the coloring. So it's important to enable this.
    glEnable(GL_LIGHT0);					// Quick And Dirty Lighting (Assumes Light0 Is Set Up)
    glEnable(GL_LIGHTING);					// Enable Lighting
    glEnable(GL_COLOR_MATERIAL);				// Enable Material Coloring
Finally we set the perspective correction to look nice, and we return TRUE letting our program know that initialization went OK.
    glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);	// Nice Perspective Correction
    return TRUE;						// Initialization Went OK
Now for the drawing code. As usual, I got a little crazy with the math. No SIN, and COS, but it's still a little strange :) We start off as usual by clearing the screen and depth buffer.

Then we bind a texture to the cube. I could have added this line inside the display list code, but by leaving it outside the display list, I can change the texture whenever I want. If I added the line glBindTexture(GL_TEXTURE_2D, texture[0]) inside the display list code, the display list would be built with whatever texture I selected permanently mapped onto it.
int DrawGLScene(GLvoid)						// Here's Where We Do All The Drawing
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);	// Clear The Screen And The Depth Buffer

    glBindTexture(GL_TEXTURE_2D, texture[0]);		// Select The Texture
Now for the fun stuff. We have a loop called yloop. This loop is used to position the cubes on the Y axis (up and down). We want 5 rows of cubes up and down, so we make a loop from 1 to less than 6 (which is 5).
    for (yloop=1;yloop<6;yloop++)				// Loop Through The Y Plane
    {
We have another loop called xloop. It's used to position the cubes on the X axis (left to right). The number of cubes drawn left to right depends on what row we're on. If we're on the top row, xloop will only go from 0 to 1 (drawing one cube). the next row xloop will go from 0 to 2 (drawing 2 cubes), etc.
        for (xloop=0;xloop<yloop;xloop++)		// Loop Through The X Plane
        {
We reset our view with glLoadIdentity().
            glLoadIdentity();			// Reset The View
The next line translates to a specific spot on the screen. It looks confussing, but it's actually not. On the X axis, the following happens:

We move to the right 1.4 units so that the pyramid is in the center of the screen. Then we multiply xloop by 2.8 and add the 1.4 to it. (we multiply by 2.8 so that the cubes are not on top of eachother (2.8 is roughly the width of the cubes when they're rotated 45 degrees). Finally we subtract yloop*1.4. This moves the cubes left depending on what row we're on. If we didn't move to the left, the pyramid would line up on the left side (wouldn't really look a pyramid would it).

On the Y axis we subtract yloop from 6 otherwise the pyramid would be built upside down. Then we multiply the result by 2.4. Otherwise the cubes would be on top of eachother on the y axis (2.4 is roughly the height of each cube). Then we subtract 7 so that the pyramid starts at the bottom of the screen and is built upwards.

Finally, on the Z axis we move into the screen 20 units. That way the pyramid fits nicely on the screen.
            // Position The Cubes On The Screen
            glTranslatef(1.4f+(float(xloop)*2.8f)-(float(yloop)*1.4f),((6.0f-float(yloop))*2.4f)-7.0f,-20.0f);
Now we rotate on the x axis. We'll tilt the cube towards the view by 45 degrees minus 2 multiplied by yloop. Perspective mode tilts the cubes automatically, so I subtract to compensate for the tilt. Not the best way to do it, but it works :)

Finally we add xrot. This gives us keyboard control over the angle. (fun to play around with).

After we've rotated on the x axis, we rotate 45 degrees on the y axis, and add yrot so we have keyboard control on the y axis.
            glRotatef(45.0f-(2.0f*yloop)+xrot,1.0f,0.0f,0.0f);	// Tilt The Cubes Up And Down
            glRotatef(45.0f+yrot,0.0f,1.0f,0.0f);			// Spin Cubes Left And Right
Next we select a box color (bright) before we actually draw the box portion of the cube. Notice we're using glColor3fv(). What this does is loads all three values (red, green, blue) from inside the {}'s at once and sets the color. 3fv stands for 3 values, floating point, v is a pointer to an array. The color we select is yloop-1 which gives us a different color for each row of the cubes. If we used xloop-1 we'd get a different color for each column.
            glColor3fv(boxcol[yloop-1]);		// Select A Box Color
Now that the color is set, all we have to do is draw our box. Instead of writing out all the code to draw a box, all we do is call our display list. We do this with the command glCallList(box). box tells OpenGL to select the box display list. The box display list is the cube without its top.

The box will be drawn using the color we selected with glColor3fv(), at the position we translated to.
            glCallList(box);			// Draw The Box
Now we select a top color (darker) before we draw the top of the box. If you actually wanted to make Q-Bert, you'd change this color whenever Q-Bert jumped on the box. The color depends on the row (yloop-1).
            glColor3fv(topcol[yloop-1]);		// Select The Top Color
Finally, the only thing left to do is draw the top display list. This will add a darker colored lid to the box. That's it. Very easy!
            glCallList(top);			// Draw The Top
        }
    }
    return TRUE;						// Jump Back
}
The remaining changes have all been made in WinMain(). The code has been added right after our SwapBuffers(hDC) line. It check to see if we are pressing left, right, up or down, and moves the cubes accordingly.
        SwapBuffers(hDC);				// Swap Buffers (Double Buffering)
        if (keys[VK_LEFT])				// Left Arrow Being Pressed?
        {
            yrot-=0.2f;				// If So Spin Cubes Left
        }
        if (keys[VK_RIGHT])				// Right Arrow Being Pressed?
        {
            yrot+=0.2f;				// If So Spin Cubes Right
        }
        if (keys[VK_UP])				// Up Arrow Being Pressed?
        {
            xrot-=0.2f;				// If So Tilt Cubes Up
        }
        if (keys[VK_DOWN])				// Down Arrow Being Pressed?
        {
            xrot+=0.2f;				// If So Tilt Cubes Down
        }
Like all the previous tutorials, make sure the title at the top of the window is correct.
        if (keys[VK_F1])				// Is F1 Being Pressed?
        {
            keys[VK_F1]=FALSE;			// If So Make Key FALSE
            KillGLWindow();				// Kill Our Current Window
            fullscreen=!fullscreen;			// Toggle Fullscreen / Windowed Mode
            // Recreate Our OpenGL Window
            if (!CreateGLWindow("NeHe's Display List Tutorial",640,480,16,fullscreen))
            {
                return 0;			// Quit If Window Was Not Created
            }
        }
    }
}
By the end of this tutorial you should have a good understanding of how display lists work, how to create them, and how to display them on the screen. Display lists are great. Not only do they simplify coding complex projects, they also give you that little bit of extra speed required to maintain high framerates.

I hope you've enjoy the tutorial. If you have any questions or feel somethings not clear, please email me and let me know.


Lesson 13 - Bitmap Fonts

Lesson 13
Welcome to yet another Tutorial. This time on I'll be teaching you how to use Bitmap Fonts. You may be saying to yourself "what's so hard about putting text onto the screen". If you've ever tried it, it's not that easy!

Sure you can load up an art program, write text onto an image, load the image into your OpenGL program, turn on blending then map the text onto the screen. But this is time consuming, the final result usually looks blurry or blocky depending on the type of filtering you use, and unless your image has an alpha channel your text will end up transparent (blended with the objects on the screen) once it's mapped to the screen.

If you've ever used Wordpad, Microsoft Word or some other Word Processor, you may have noticed all the different types of Font's avaialable. This tutorial will teach you how to use the exact same fonts in your own OpenGL programs. As a matter of fact... Any font you install on your computer can be used in your demos.

Not only do Bitmap Fonts looks 100 times better than graphical fonts (textures). You can change the text on the fly. No need to make textures for each word or letter you want to write to the screen. Just position the text, and use my handy new gl command to display the text on the screen.

I tried to make the command as simple as possible. All you do is type glPrint("Hello"). It's that easy. Anyways. You can tell by the long intro that I'm pretty happy with this tutorial. It took me roughly 1 1/2 hours to create the program. Why so long? Because there is literally no information available on using Bitmap Fonts, unless of course you enjoy MFC code. In order to keep the code simple I decided it would be nice if I wrote it all in simple to understand C code :)

A small note, this code is Windows specific. It uses the wgl functions of Windows to build the font. Apparently Apple has agl support that should do the same thing, and X has glx. Unfortunately I can't guarantee this code is portable. If anyone has platform independant code to draw fonts to the screen, send it my way and I'll write another font tutorial.

We start off with the typical code from lesson 1. We'll be adding the stdio.h header file for standard input/output operations; the stdarg.h header file to parse the text and convert variables to text, and finally the math.h header file so we can move the text around the screen using SIN and COS.
#include <windows.h>		// Header File For Windows
#include <math.h>		// Header File For Windows Math Library		( ADD )
#include <stdio.h>		// Header File For Standard Input/Output	( ADD )
#include <stdarg.h>		// Header File For Variable Argument Routines	( ADD )
#include <gl\gl.h>		// Header File For The OpenGL32 Library
#include <gl\glu.h>		// Header File For The GLu32 Library
#include <gl\glaux.h>		// Header File For The GLaux Library

HDC		hDC=NULL;	// Private GDI Device Context
HGLRC		hRC=NULL;	// Permanent Rendering Context
HWND		hWnd=NULL;	// Holds Our Window Handle
HINSTANCE	hInstance;	// Holds The Instance Of The Application
We're going to add 3 new variables as well. base will hold the number of the first display list we create. Each character requires it's own display list. The character 'A' is 65 in the display list, 'B' is 66, 'C' is 67, etc. So 'A' would be stored in display list base+65.

Next we add two counters (cnt1 & cnt2). These counters will count up at different rates, and are used to move the text around the screen using SIN and COS. This creates a semi-random looking movement on the screen. We'll also use the counters to control the color of the letters (more on this later).
GLuint	base;			// Base Display List For The Font Set
GLfloat	cnt1;			// 1st Counter Used To Move Text & For Coloring
GLfloat	cnt2;			// 2nd Counter Used To Move Text & For Coloring

bool	keys[256];		// Array Used For The Keyboard Routine
bool	active=TRUE;		// Window Active Flag Set To TRUE By Default
bool	fullscreen=TRUE;	// Fullscreen Flag Set To Fullscreen Mode By Default

LRESULT	CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);	// Declaration For WndProc
The following section of code builds the actual font. This was the most difficult part of the code to write. 'HFONT font' in simple english tells Windows we are going to be manipulating a Windows font.

Next we define base. We do this by creating a group of 96 display lists using glGenLists(96). After the display lists are created, the variable base will hold the number of the first list.
GLvoid BuildFont(GLvoid)					// Build Our Bitmap Font
{
    HFONT	font;						// Windows Font ID

    base = glGenLists(96);					// Storage For 96 Characters ( NEW )
Now for the fun stuff. We're going to create our font. We start off by specifying the size of the font. You'll notice it's a negative number. By putting a minus, we're telling windows to find us a font based on the CHARACTER height. If we use a positive number we match the font based on the CELL height.
    font = CreateFont(	-24,				// Height Of Font ( NEW )
Then we specify the cell width. You'll notice I have it set to 0. By setting values to 0, windows will use the default value. You can play around with this value if you want. Make the font wide, etc.
                0,				// Width Of Font
Angle of Escapement will rotate the font. Unfortunately this isn't a very useful feature. Unless your at 0, 90, 180, and 270 degrees, the font usually gets cropped to fit inside it's invisible square border. Orientation Angle quoted from MSDN help Specifies the angle, in tenths of degrees, between each character's base line and the x-axis of the device. Unfortunately I have no idea what that means :(
                0,				// Angle Of Escapement
                0,				// Orientation Angle
Font weight is a great parameter. You can put a number from 0 - 1000 or you can use one of the predefined values. FW_DONTCARE is 0, FW_NORMAL is 400, FW_BOLD is 700 and FW_BLACK is 900. There are alot more predefined values, but those 4 give some good variety. The higher the value, the thicker the font (more bold).
                FW_BOLD,			// Font Weight
Italic, Underline and Strikeout can be either TRUE or FALSE. Basically if underline is TRUE, the font will be underlined. If it's FALSE it wont be. Pretty simple :)
                FALSE,				// Italic
                FALSE,				// Underline
                FALSE,				// Strikeout
Character set Identifier describes the type of Character set you wish to use. There are too many types to explain. CHINESEBIG5_CHARSET, GREEK_CHARSET, RUSSIAN_CHARSET, DEFAULT_CHARSET, etc. ANSI is the one I use, although DEFAULT would probably work just as well.

If you're interested in using a font such as Webdings or Wingdings, you need to use SYMBOL_CHARSET instead of ANSI_CHARSET.
                ANSI_CHARSET,			// Character Set Identifier
Output Precision is very important. It tells Windows what type of character set to use if there is more than one type available. OUT_TT_PRECIS tells Windows that if there is more than one type of font to choose from with the same name, select the TRUETYPE version of the font. Truetype fonts always look better, especially when you make them large. You can also use OUT_TT_ONLY_PRECIS, which ALWAYS trys to use a TRUETYPE Font.
                OUT_TT_PRECIS,			// Output Precision
Clipping Precision is the type of clipping to do on the font if it goes outside the clipping region. Not much to say about this, just leave it set to default.
                CLIP_DEFAULT_PRECIS,		// Clipping Precision
Output Quality is very important.you can have PROOF, DRAFT, NONANTIALIASED, DEFAULT or ANTIALIASED. We all know that ANTIALIASED fonts look good :) Antialiasing a font is the same effect you get when you turn on font smoothing in Windows. It makes everything look less jagged.
                ANTIALIASED_QUALITY,		// Output Quality
Next we have the Family and Pitch settings. For pitch you can have DEFAULT_PITCH, FIXED_PITCH and VARIABLE_PITCH, and for family you can have FF_DECORATIVE, FF_MODERN, FF_ROMAN, FF_SCRIPT, FF_SWISS, FF_DONTCARE. Play around with them to find out what they do. I just set them both to default.
                FF_DONTCARE|DEFAULT_PITCH,	// Family And Pitch
Finally... We have the actual name of the font. Boot up Microsoft Word or some other text editor. Click on the font drop down menu, and find a font you like. To use the font, replace 'Courier New' with the name of the font you'd rather use.
                "Courier New");			// Font Name
Now we select the font by relating it to our DC, and build the 96 display lists starting at character 32 (which is a blank space). You can build all 256 if you'd like, just make sure you build 256 display lists using glGenLists. Make sure you delete all 256 display lists when you quit the program, and make sure you set 32 to 0 and 96 to 255 in the line below.
    SelectObject(hDC, font);				// Selects The Font We Created ( NEW )

    wglUseFontBitmaps(hDC, 32, 96, base);			// Builds 96 Characters Starting At Character 32 ( NEW )
}
The following code is pretty simple. It deletes the 96 display lists from memory starting at the first list specified by 'base'. I'm not sure if windows would do this for you, but it's better to be safe than sorry :)
GLvoid KillFont(GLvoid)						// Delete The Font
{
     glDeleteLists(base, 96);				// Delete All 96 Characters ( NEW )
}
Now for my handy dandy GL text routine. You call this section of code with the command glPrint("message goes here"). The text is stored in the char string *fmt.
GLvoid glPrint(const char *fmt, ...)				// Custom GL "Print" Routine
{
The first line below creates storage space for a 256 character string. text is the string we will end up printing to the screen. The second line below creates a pointer that points to the list of arguments we pass along with the string. If we send any variables along with the text, this will point to them.
    char		text[256];				// Holds Our String
    va_list		ap;					// Pointer To List Of Arguments
The next two lines of code check to see if there's anything to display? If there's no text, fmt will equal nothing (NULL), and nothing will be drawn to the screen.
    if (fmt == NULL)					// If There's No Text
        return;						// Do Nothing
The following three lines of code convert any symbols in the text to the actual numbers the symbols represent. The final text and any converted symbols are then stored in the character string called "text". I'll explain symbols in more detail down below.
    va_start(ap, fmt);					// Parses The String For Variables
        vsprintf(text, fmt, ap);				// And Converts Symbols To Actual Numbers
    va_end(ap);						// Results Are Stored In Text
We then push the GL_LIST_BIT, this prevents glListBase from affecting any other display lists we may be using in our program.

The command glListBase(base-32) is a little hard to explain. Say we draw the letter 'A', it's represented by the number 65. Without glListBase(base-32) OpenGL wouldn't know where to find this letter. It would look for it at display list 65, but if base was equal to 1000, 'A' would actually be stored at display list 1065. So by setting a base starting point, OpenGL knows where to get the proper display list from. The reason we subtract 32 is because we never made the first 32 display lists. We skipped them. So we have to let OpenGL know this by subtracting 32 from the base value. I hope that makes sense.
    glPushAttrib(GL_LIST_BIT);				// Pushes The Display List Bits		( NEW )
    glListBase(base - 32);					// Sets The Base Character to 32	( NEW )
Now that OpenGL knows where the Letters are located, we can tell it to write the text to the screen. glCallLists is a very interesting command. It's capable of putting more than one display list on the screen at a time.

The line below does the following. First it tells OpenGL we're going to be displaying lists to the screen. strlen(text) finds out how many letters we're going to send to the screen. Next it needs to know what the largest list number were sending to it is going to be. We're not sending any more than 255 characters. So we can use an UNSIGNED_BYTE. (remember a byte is any value from 0 - 255). Finally we tell it what to display by passing the string 'text'.

In case you're wondering why the letters don't pile on top of eachother. Each display list for each character knows where the right side of the letter is. After the letter is drawn, OpenGL translates to the right side of the drawn letter. The next letter or object drawn will be drawn starting at the last location GL translated to, which is to the right of the last letter.

Finally we pop the GL_LIST_BIT setting GL back to how it was before we set our base setting using glListBase(base-32).
    glCallLists(strlen(text), GL_UNSIGNED_BYTE, text);	// Draws The Display List Text	( NEW )
    glPopAttrib();						// Pops The Display List Bits	( NEW )
}
The only thing different in the Init code is the line BuildFont(). This jumps to the code above that builds the font so OpenGL can use it later on.
int InitGL(GLvoid)						// All Setup For OpenGL Goes Here
{
    glShadeModel(GL_SMOOTH);				// Enable Smooth Shading
    glClearColor(0.0f, 0.0f, 0.0f, 0.5f);			// Black Background
    glClearDepth(1.0f);					// Depth Buffer Setup
    glEnable(GL_DEPTH_TEST);				// Enables Depth Testing
    glDepthFunc(GL_LEQUAL);					// The Type Of Depth Testing To Do
    glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);	// Really Nice Perspective Calculations

    BuildFont();						// Build The Font

    return TRUE;						// Initialization Went OK
}
Now for the drawing code. We start off by clearing the screen and the depth buffer. We call glLoadIdentity() to reset everything. Then we translate one unit into the screen. If we don't translate, the text wont show up. Bitmap fonts work better when you use an ortho projection rather than a perspective projection, but ortho looks bad, so to make it work in projection, translate.

You'll notice that if you translate even deeper into the screen the size of the font does not shrink like you'd expect it to. What actually happens when you translate deeper is that you have more control over where the text is on the screen. If you tranlate 1 unit into the screen, you can place the text anywhere from -0.5 to +0.5 on the X axis. If you tranlate 10 units into the screen, you place the text from -5 to +5. It just gives you more control instead of using decimal places to position the text at exact locations. Nothing will change the size of the text. Not even glScalef(x,y,z). If you want the font bigger or smaller, make it bigger or smaller when you create it!
int DrawGLScene(GLvoid)						// Here's Where We Do All The Drawing
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);	// Clear The Screen And The Depth Buffer
    glLoadIdentity();					// Reset The View
    glTranslatef(0.0f,0.0f,-1.0f);				// Move One Unit Into The Screen
Now we use some fancy math to make the colors pulse. Don't worry if you don't understand what I'm doing. I like to take advantage of as many variables and stupid tricks as I can to achieve results :)

In this case I'm using the two counters we made to move the text around the screen to change the red, green and blue colors. Red will go from -1.0 to 1.0 using COS and counter 1. Green will also go from -1.0 to 1.0 using SIN and counter 2. Blue will go from 0.5 to 1.5 using COS and counter 1 and 2. That way blue will never be 0, and the text should never completely fade out. Stupid, but it works :)
    // Pulsing Colors Based On Text Position
    glColor3f(1.0f*float(cos(cnt1)),1.0f*float(sin(cnt2)),1.0f-0.5f*float(cos(cnt1+cnt2)));
Now for a new command. glRasterPos2f(x,y) will position the Bitmapped Font on the screen. The center of the screen is still 0,0. Notice there's no Z position. Bitmap Fonts only use the X axis (left/right) and Y axis (up/down). Because we translate one unit into the screen, the far left is -0.5, and the far right is +0.5. You'll notice that I move 0.45 pixels to the left on the X axis. This moves the text into the center of the screen. Otherwise it would be more to the right of the screen because it would be drawn from the center to the right.

The fancy(?) math does pretty much the same thing as the color setting math does. It moves the text on the x axis from -0.50 to -0.40 (remember, we subtract 0.45 right off the start). This keeps the text on the screen at all times. It swings left and right using COS and counter 1. It moves from -0.35 to +0.35 on the Y axis using SIN and counter 2.
    // Position The Text On The Screen
    glRasterPos2f(-0.45f+0.05f*float(cos(cnt1)), 0.35f*float(sin(cnt2)));
Now for my favorite part... Writing the actual text to the screen. I tried to make it super easy, and very user friendly. You'll notice it looks alot like an OpenGL call, combined with the good old fashioned Print statement :) All you do to write the text to the screen is glPrint("{any text you want}"). It's that easy. The text will be drawn onto the screen at the exact spot you positioned it.

Shawn T. sent me modified code that allows glPrint to pass variables to the screen. This means that you can increase a counter and display the results on the screen! It works like this... In the line below you see our normal text. Then there's a space, a dash, a space, then a "symbol" (%7.2f). Now you may look at %7.2f and say what the heck does that mean. It's very simple. % is like a marker saying don't print 7.2f to the screen, because it represents a variable. The 7 means a maximum of 7 digits will be displayed to the left of the decimal place. Then the decimal place, and right after the decimal place is a 2. The 2 means that only two digits will be displayed to the right of the decimal place. Finally, the f. The f means that the number we want to display is a floating point number. We want to display the value of cnt1 on the screen. As an example, if cnt1 was equal to 300.12345f the number we would end up seeing on the screen would be 300.12. The 3, 4, and 5 after the decimal place would be cut off because we only want 2 digits to appear after the decimal place.

I know if you're an experienced C programmer, this is absolute basic stuff, but there may be people out there that have never used printf. If you're interested in learning more about symbols, buy a book, or read through the MSDN.
     glPrint("Active OpenGL Text With NeHe - %7.2f", cnt1);	// Print GL Text To The Screen
The last thing to do is increase both the counters by different amounts so the colors pulse and the text moves.
    cnt1+=0.051f;						// Increase The First Counter
    cnt2+=0.005f;						// Increase The Second Counter
    return TRUE;						// Everything Went OK
}
The last thing to do is add KillFont() to the end of KillGLWindow() just like I'm showing below. It's important to add this line. It cleans things up before we exit our program.
    if (!UnregisterClass("OpenGL",hInstance))		// Are We Able To Unregister Class
    {
        MessageBox(NULL,"Could Not Unregister Class.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        hInstance=NULL;					// Set hInstance To NULL
    }

    KillFont();						// Destroy The Font
}
That's it... Everything you need to know in order to use Bitmap Fonts in your own OpenGL projects. I've searched the net looking for a tutorial similar to this one, and have found nothing. Perhaps my site is the first to cover this topic in easy to understand C code? Anyways. Enjoy the tutorial, and happy coding!


Lesson 14 - Outline Fonts

Lesson 14
This tutorial is a sequel to the last tutorial. In tutorial 13 I taught you how to use Bitmap Fonts. In this tutorial I'll teach you how to use Outline Fonts.

The way we create Outline fonts is fairly similar to the way we made the Bitmap font in lesson 13. However... Outline fonts are about 100 times more cool! You can size Outline fonts. Outline font's can move around the screen in 3D, and outline fonts can have thickness! No more flat 2D characters. With Outline fonts, you can turn any font installed on your computer into a 3D font for OpenGL, complete with proper normals so the characters light up really nice when light shines on them.

A small note, this code is Windows specific. It uses the wgl functions of Windows to build the font. Apparently Apple has agl support that should do the same thing, and X has glx. Unfortunately I can't guarantee this code is portable. If anyone has platform independant code to draw fonts to the screen, send it my way and I'll write another font tutorial.

We start off with the typical code from lesson 1. We'll be adding the stdio.h header file for standard input/output operations; the stdarg.h header file to parse the text and convert variables to text, and finally the math.h header file so we can move the text around the screen using SIN and COS.
#include <windows.h>		// Header File For Windows
#include <math.h>		// Header File For Windows Math Library		( ADD )
#include <stdio.h>		// Header File For Standard Input/Output	( ADD )
#include <stdarg.h>		// Header File For Variable Argument Routines	( ADD )
#include <gl\gl.h>		// Header File For The OpenGL32 Library
#include <gl\glu.h>		// Header File For The GLu32 Library
#include <gl\glaux.h>		// Header File For The GLaux Library

HDC		hDC=NULL;	// Private GDI Device Context
HGLRC		hRC=NULL;	// Permanent Rendering Context
HWND		hWnd=NULL;	// Holds Our Window Handle
HINSTANCE	hInstance;	// Holds The Instance Of The Application
We're going to add 2 new variables. base will hold the number of the first display list we create. Each character requires it's own display list. The character 'A' is 65 in the display list, 'B' is 66, 'C' is 67, etc. So 'A' would be stored in display list base+65.

Next we add a variable called rot. rot will be used to spin the text around on the screen using both SIN and COS. It will also be used to pulse the colors.
GLuint	base;			// Base Display List For The Font Set	( ADD )
GLfloat	rot;			// Used To Rotate The Text		( ADD )

bool	keys[256];		// Array Used For The Keyboard Routine
bool	active=TRUE;		// Window Active Flag Set To TRUE By Default
bool	fullscreen=TRUE;	// Fullscreen Flag Set To Fullscreen Mode By Default
GLYPHMETRICSFLOAT gmf[256] will hold information about the placement and orientation for each of our 256 outline font display lists. We select a letter by using gmf[num]. num is the number of the display list we want to know something about. Later in the code I'll show you how to find out the width of each character so that you can automatically center the text on the screen. Keep in mind that each character can be a different width. glyphmetrics will make our lives a whole lot easier.
GLYPHMETRICSFLOAT gmf[256];	// Storage For Information About Our Font

LRESULT	CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);	// Declaration For WndProc
The following section of code builds the actual font similar to the way we made our Bitmap font. Just like in lesson 13, this section of code was the hardest part for me to figure out.

'HFONT font' will hold our Windows font ID.

Next we define base. We do this by creating a group of 256 display lists using glGenLists(256). After the display lists are created, the variable base will hold the number of the first list.
GLvoid BuildFont(GLvoid)					// Build Our Bitmap Font
{
    HFONT	font;						// Windows Font ID

    base = glGenLists(256);					// Storage For 256 Characters
More fun stuff. We're going to create our Outline font. We start off by specifying the size of the font. You'll notice it's a negative number. By putting a minus, we're telling windows to find us a font based on the CHARACTER height. If we use a positive number we match the font based on the CELL height.
    font = CreateFont(	-12,				// Height Of Font
Then we specify the cell width. You'll notice I have it set to 0. By setting values to 0, windows will use the default value. You can play around with this value if you want. Make the font wide, etc.
                0,				// Width Of Font
Angle of Escapement will rotate the font. Orientation Angle quoted from MSDN help Specifies the angle, in tenths of degrees, between each character's base line and the x-axis of the device. Unfortunately I have no idea what that means :(
                0,				// Angle Of Escapement
                0,				// Orientation Angle
Font weight is a great parameter. You can put a number from 0 - 1000 or you can use one of the predefined values. FW_DONTCARE is 0, FW_NORMAL is 400, FW_BOLD is 700 and FW_BLACK is 900. There are alot more predefined values, but those 4 give some good variety. The higher the value, the thicker the font (more bold).
                FW_BOLD,			// Font Weight
Italic, Underline and Strikeout can be either TRUE or FALSE. Basically if underline is TRUE, the font will be underlined. If it's FALSE it wont be. Pretty simple :)
                FALSE,				// Italic
                FALSE,				// Underline
                FALSE,				// Strikeout
Character set Identifier describes the type of Character set you wish to use. There are too many types to explain. CHINESEBIG5_CHARSET, GREEK_CHARSET, RUSSIAN_CHARSET, DEFAULT_CHARSET, etc. ANSI is the one I use, although DEFAULT would probably work just as well.

If you're interested in using a font such as Webdings or Wingdings, you need to use SYMBOL_CHARSET instead of ANSI_CHARSET.
                ANSI_CHARSET,			// Character Set Identifier
Output Precision is very important. It tells Windows what type of character set to use if there is more than one type available. OUT_TT_PRECIS tells Windows that if there is more than one type of font to choose from with the same name, select the TRUETYPE version of the font. Truetype fonts always look better, especially when you make them large. You can also use OUT_TT_ONLY_PRECIS, which ALWAYS trys to use a TRUETYPE Font.
                OUT_TT_PRECIS,			// Output Precision
Clipping Precision is the type of clipping to do on the font if it goes outside the clipping region. Not much to say about this, just leave it set to default.
                CLIP_DEFAULT_PRECIS,		// Clipping Precision
Output Quality is very important.you can have PROOF, DRAFT, NONANTIALIASED, DEFAULT or ANTIALIASED. We all know that ANTIALIASED fonts look good :) Antialiasing a font is the same effect you get when you turn on font smoothing in Windows. It makes everything look less jagged.
                ANTIALIASED_QUALITY,		// Output Quality
Next we have the Family and Pitch settings. For pitch you can have DEFAULT_PITCH, FIXED_PITCH and VARIABLE_PITCH, and for family you can have FF_DECORATIVE, FF_MODERN, FF_ROMAN, FF_SCRIPT, FF_SWISS, FF_DONTCARE. Play around with them to find out what they do. I just set them both to default.
                FF_DONTCARE|DEFAULT_PITCH,	// Family And Pitch
Finally... We have the actual name of the font. Boot up Microsoft Word or some other text editor. Click on the font drop down menu, and find a font you like. To use the font, replace 'Comic Sans MS' with the name of the font you'd rather use.
                "Comic Sans MS");		// Font Name
Now we select the font by relating it to our DC.
    SelectObject(hDC, font);				// Selects The Font We Created
Now for the new code. We build our Outline font using a new command wglUseFontOutlines. We select our DC, the starting character, the number of characters to create and the 'base' display list value. All very similar to the way we built our Bitmap font.
    wglUseFontOutlines(	hDC,				// Select The Current DC
                0,				// Starting Character
                255,				// Number Of Display Lists To Build
                base,				// Starting Display Lists
That's not all however. We then set the deviation level. The closer to 0.0f, the smooth the font will look. After we set the deviation, we get to set the font thickness. This describes how thick the font is on the Z axis. 0.0f will produce a flat 2D looking font and 1.0f will produce a font with some depth.

The parameter WGL_FONT_POLYGONS tells OpenGL to create a solid font using polygons. If we use WGL_FONT_LINES instead, the font will be wireframe (made of lines). It's also important to note that if you use GL_FONT_LINES, normals will not be generated so lighting will not work properly.

The last parameter gmf points to the address buffer for the display list data.
                0.0f,				// Deviation From The True Outlines
                0.2f,				// Font Thickness In The Z Direction
                WGL_FONT_POLYGONS,		// Use Polygons, Not Lines
                gmf);				// Address Of Buffer To Recieve Data
}
The following code is pretty simple. It deletes the 256 display lists from memory starting at the first list specified by base. I'm not sure if Windows would do this for you, but it's better to be safe than sorry :)
GLvoid KillFont(GLvoid)						// Delete The Font
{
     glDeleteLists(base, 256);				// Delete All 256 Characters
}
Now for my handy dandy GL text routine. You call this section of code with the command glPrint("message goes here"). Exactly the same way you drew Bitmap fonts to the screen in lesson 13. The text is stored in the char string fmt.
GLvoid glPrint(const char *fmt, ...)				// Custom GL "Print" Routine
{
The first line below sets up a variable called length. We'll use this variable to find out how our string of text is. The second line creates storage space for a 256 character string. text is the string we will end up printing to the screen. The third line creates a pointer that points to the list of arguments we pass along with the string. If we send any variables along with the text, this pointer will point to them.
    float		length=0;				// Used To Find The Length Of The Text
    char		text[256];				// Holds Our String
    va_list		ap;					// Pointer To List Of Arguments
The next two lines of code check to see if there's anything to display? If there's no text, fmt will equal nothing (NULL), and nothing will be drawn to the screen.
    if (fmt == NULL)					// If There's No Text
        return;						// Do Nothing
The following three lines of code convert any symbols in the text to the actual numbers the symbols represent. The final text and any converted symbols are then stored in the character string called "text". I'll explain symbols in more detail down below.
    va_start(ap, fmt);					// Parses The String For Variables
        vsprintf(text, fmt, ap);				// And Converts Symbols To Actual Numbers
    va_end(ap);						// Results Are Stored In Text
Thanks to Jim Williams for suggesting the code below. I was centering the text manually. His method works alot better :)

We start off by making a loop that goes through all the text character by character. strlen(text) gives us the length of our text. After we've set up the loop, we will increase the value of length by the width of each character. When we are done the value stored in length will be the width of our entire string. So if we were printing "hello" and by some fluke each character was exactly 10 units wide, we'd increase the value of length by the width of the first letter 10. Then we'd check the width of the second letter. The width would also be 10, so length would become 10+10 (20). By the time we were done checking all 4 letters length would equal 40 (4*10).

The code that gives us the width of each character is gmf[text[loop]].gmfCellIncX. remember that gmf stores information out each display list. If loop is equal to 0 text[loop] will be the first character in our string. If loop is equal to 1 text[loop] will be the second character in our string. gmfCellIncX tells us how wide the selected character is. gmfCellIncX is actually the distance that our display moves to the right after the character has been drawn so that each character isn't drawn on top of eachother. Just so happens that distance is our width :) You can also find out the character height with the command gmfCellIncY. This might come in handy if you're drawing text vertically on the screen instead of horizontally.
    for (unsigned int loop=0;loop<(strlen(text));loop++)	// Loop To Find Text Length
    {
        length+=gmf[text[loop]].gmfCellIncX;		// Increase Length By Each Characters Width
    }
Finally we take the length that we calculate and make it a negative number (because we have to move left of center to center our text). We then divide the length by 2. We don't want all the text to move left of center, just half the text!
    glTranslatef(-length/2,0.0f,0.0f);			// Center Our Text On The Screen
We then push the GL_LIST_BIT, this prevents glListBase from affecting any other display lists we may be using in our program.

The command glListBase(base) tells OpenGL where to find the proper display list for each character.
    glPushAttrib(GL_LIST_BIT);				// Pushes The Display List Bits
    glListBase(base);					// Sets The Base Character to 0
Now that OpenGL knows where the characters are located, we can tell it to write the text to the screen. glCallLists writes the entire string of text to the screen at once by making multiple display list calls for you.

The line below does the following. First it tells OpenGL we're going to be displaying lists to the screen. strlen(text) finds out how many letters we're going to send to the screen. Next it needs to know what the largest list number were sending to it is going to be. We're still not sending any more than 255 characters. So we can use an UNSIGNED_BYTE. (a byte represents a number from 0 - 255 which is exactly what we need). Finally we tell it what to display by passing the string text.

In case you're wondering why the letters don't pile on top of eachother. Each display list for each character knows where the right side of the character is. After the letter is drawn to the screen, OpenGL translates to the right side of the drawn letter. The next letter or object drawn will be drawn starting at the last location GL translated to, which is to the right of the last letter.

Finally we pop the GL_LIST_BIT setting GL back to how it was before we set our base setting using glListBase(base).
    glCallLists(strlen(text), GL_UNSIGNED_BYTE, text);	// Draws The Display List Text
    glPopAttrib();						// Pops The Display List Bits
}
Resizing code is exactly the same as the code in Lesson 1 so we'll skip over it.

There are a few new lines at the end of the InitGL code. The line BuildFont() from lesson 13 is still there, along with new code to do quick and dirty lighting. Light0 is predefined on most video cards and will light up the scene nicely with no effort on my part :)

I've also added the command glEnable(GL_Color_Material). Because the characters are 3D objects you need to enable Material Coloring, otherwise changing the color with glColor3f(r,g,b) will not change the color of the text. If you're drawing shapes of your own to the screen while you write text enable material coloring before you write the text, and disable it after you've drawn the text, otherwise all the object on your screen will be colored.
int InitGL(GLvoid)						// All Setup For OpenGL Goes Here
{
    glShadeModel(GL_SMOOTH);				// Enable Smooth Shading
    glClearColor(0.0f, 0.0f, 0.0f, 0.5f);			// Black Background
    glClearDepth(1.0f);					// Depth Buffer Setup
    glEnable(GL_DEPTH_TEST);				// Enables Depth Testing
    glDepthFunc(GL_LEQUAL);					// The Type Of Depth Testing To Do
    glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);	// Really Nice Perspective Calculations
    glEnable(GL_LIGHT0);					// Enable Default Light (Quick And Dirty)	( NEW )
    glEnable(GL_LIGHTING);					// Enable Lighting				( NEW )
    glEnable(GL_COLOR_MATERIAL);				// Enable Coloring Of Material			( NEW )

    BuildFont();						// Build The Font				( ADD )

    return TRUE;						// Initialization Went OK
}
Now for the drawing code. We start off by clearing the screen and the depth buffer. We call glLoadIdentity() to reset everything. Then we translate ten units into the screen. Outline fonts look great in perspective mode. The further into the screen you translate, the smaller the font becomes. The closer you translate, the larger the font becomes.

Outline fonts can also be manipulated by using the glScalef(x,y,z) command. If you want the font 2 times taller, use glScalef(1.0f,2.0f,1.0f). the 2.0f is on the y axis, which tells OpenGL to draw the list twice as tall. If the 2.0f was on the x axis, the character would be twice as wide.
int DrawGLScene(GLvoid)						// Here's Where We Do All The Drawing
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);	// Clear The Screen And The Depth Buffer
    glLoadIdentity();					// Reset The View
    glTranslatef(0.0f,0.0f,-10.0f);				// Move Ten Units Into The Screen
After we've translated into the screen, we want the text to spin. The next 3 lines rotate the screen on all three axes. I multiply rot by different numbers to make each rotation happen at a different speed.
    glRotatef(rot,1.0f,0.0f,0.0f);				// Rotate On The X Axis
    glRotatef(rot*1.5f,0.0f,1.0f,0.0f);			// Rotate On The Y Axis
    glRotatef(rot*1.4f,0.0f,0.0f,1.0f);			// Rotate On The Z Axis
Now for the crazy color cycling. As usual, I make use of the only variable that counts up (rot). The colors pulse up and down using COS and SIN. I divide the value of rot by different numbers so that each color isn't increasing at the same speed. The final results are nice.
    // Pulsing Colors Based On The Rotation
    glColor3f(1.0f*float(cos(rot/20.0f)),1.0f*float(sin(rot/25.0f)),1.0f-0.5f*float(cos(rot/17.0f)));
My favorite part... Writing the text to the screen. I've used the same command we used to write Bitmap fonts to the screen. All you have to do to write the text to the screen is glPrint("{any text you want}"). It's that easy!

In the code below we'll print NeHe, a space, a dash, a space, and then whatever number is stored in rot divided by 50 (to slow down the counter a bit). If the number is larger that 999.99 the 4th digit to the left will be cut off (we're requesting only 3 digits to the left of the decimal place). Only 2 digits will be displayed after the decimal place.
     glPrint("NeHe - %3.2f",rot/50);				// Print GL Text To The Screen
Then we increase the rotation variable so the colors pulse and the text spins.
    rot+=0.5f;						// Increase The Rotation Variable
    return TRUE;						// Everything Went OK
}
The last thing to do is add KillFont() to the end of KillGLWindow() just like I'm showing below. It's important to add this line. It cleans things up before we exit our program.
    if (!UnregisterClass("OpenGL",hInstance))		// Are We Able To Unregister Class
    {
        MessageBox(NULL,"Could Not Unregister Class.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        hInstance=NULL;					// Set hInstance To NULL
    }

    KillFont();						// Destroy The Font
}
At the end of this tutorial you should be able to use Outline Fonts in your own OpenGL projects. Just like lesson 13, I've searched the net looking for a tutorial similar to this one, and have found nothing. Could my site be the first to cover this topic in great detail while explaining everything in easy to understand C code? Enjoy the tutorial, and happy coding!


Lesson 15 - Texture Mapped Fonts

Lesson 15
After posting the last two tutorials on bitmap and outlined fonts, I received quite a few emails from people wondering how they could texture map the fonts. You can use autotexture coordinate generation. This will generate texture coordinates for each of the polygons on the font.

A small note, this code is Windows specific. It uses the wgl functions of Windows to build the font. Apparently Apple has agl support that should do the same thing, and X has glx. Unfortunately I can't guarantee this code is portable. If anyone has platform independant code to draw fonts to the screen, send it my way and I'll write another font tutorial.

We'll build our Texture Font demo using the code from lesson 14. If any of the code has changed in a particular section of the program, I'll rewrite the entire section of code so that it's easier to see the changes that I have made.

The following section of code is similar to the code in lesson 14, but this time we're not going to include the stdarg.h file.
#include <windows.h>					// Header File For Windows
#include <math.h>					// Header File For Windows Math Library
#include <stdio.h>					// Header File For Standard Input/Output
#include <gl\gl.h>					// Header File For The OpenGL32 Library
#include <gl\glu.h>					// Header File For The GLu32 Library
#include <gl\glaux.h>					// Header File For The GLaux Library

HDC		hDC=NULL;				// Private GDI Device Context
HGLRC		hRC=NULL;				// Permanent Rendering Context
HWND		hWnd=NULL;				// Holds Our Window Handle
HINSTANCE	hInstance;				// Holds The Instance Of The Application

bool	keys[256];					// Array Used For The Keyboard Routine
bool	active=TRUE;					// Window Active Flag Set To TRUE By Default
bool	fullscreen=TRUE;				// Fullscreen Flag Set To Fullscreen Mode By Default
We're going to add one new integer variable here called texture[ ]. It will be used to store our texture. The last three lines were in tutorial 14 and have not changed in this tutorial.
GLuint	texture[1];					// One Texture Map ( NEW )
GLuint	base;						// Base Display List For The Font Set

GLfloat	rot;						// Used To Rotate The Text

LRESULT	CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);	// Declaration For WndProc
The following section of code has some minor changes. In this tutorial I'm going to use the wingdings font to display a skull and crossbones type object. If you want to display text instead, you can leave the code the same as it was in lesson 14, or change to a font of your own.

A few of you were wondering how to use the wingdings font, which is another reason I'm not using a standard font. Wingdings is a SYMBOL font, and requires a few changes to make it work. It's not as easy as telling Windows to use the wingdings font. If you change the font name to wingdings, you'll notice that the font doesn't get selected. You have to tell Windows that the font is a symbol font and not a standard character font. More on this later.
GLvoid BuildFont(GLvoid)					// Build Our Bitmap Font
{
    GLYPHMETRICSFLOAT	gmf[256];			// Address Buffer For Font Storage
    HFONT	font;						// Windows Font ID

    base = glGenLists(256);					// Storage For 256 Characters
    font = CreateFont(	-12,				// Height Of Font
                0,				// Width Of Font
                0,				// Angle Of Escapement
                0,				// Orientation Angle
                FW_BOLD,			// Font Weight
                FALSE,				// Italic
                FALSE,				// Underline
                FALSE,				// Strikeout
This is the magic line! Instead of using ANSI_CHARSET like we did in tutorial 14, we're going to use SYMBOL_CHARSET. This tells Windows that the font we are building is not your typical font made up of characters. A symbol font is usually made up of tiny pictures (symbols). If you forget to change this line, wingdings, webdings and any other symbol font you may be trying to use will not work.
                SYMBOL_CHARSET,			// Character Set Identifier ( Modified )
The next few lines have not changed.
                OUT_TT_PRECIS,			// Output Precision
                CLIP_DEFAULT_PRECIS,		// Clipping Precision
                ANTIALIASED_QUALITY,		// Output Quality
                FF_DONTCARE|DEFAULT_PITCH,	// Family And Pitch
Now that we've selected the symbol character set identifier, we can select the wingdings font!
                "Wingdings");			// Font Name ( Modified )
The remaining lines of code have not changed.
    SelectObject(hDC, font);				// Selects The Font We Created

    wglUseFontOutlines(	hDC,				// Select The Current DC
                0,				// Starting Character
                255,				// Number Of Display Lists To Build
                base,				// Starting Display Lists
I'm allowing for more deviation. This means GL will not try to follow the outline of the font as closely. If you set deviation to 0.0f, you'll notice problems with the texturing on really curved surfaces. If you allow for some deviation, most of the problems will disappear.
                0.1f,				// Deviation From The True Outlines
The next three lines of code are still the same.
                0.2f,				// Font Thickness In The Z Direction
                WGL_FONT_POLYGONS,		// Use Polygons, Not Lines
                gmf);				// Address Of Buffer To Recieve Data
}
Right before ReSizeGLScene() we're going to add the following section of code to load our texture. You might recognize the code from previous tutorials. We create storage for the bitmap image. We load the bitmap image. We tell OpenGL to generate 1 texture, and we store this texture in texture[0].

I'm creating a mipmapped texture only because it looks better. The name of the texture is lights.bmp.
AUX_RGBImageRec *LoadBMP(char *Filename)			// Loads A Bitmap Image
{
    FILE *File=NULL;					// File Handle

    if (!Filename)						// Make Sure A Filename Was Given
    {
        return NULL;					// If Not Return NULL
    }

    File=fopen(Filename,"r");				// Check To See If The File Exists

    if (File)						// Does The File Exist?
    {
        fclose(File);					// Close The Handle
        return auxDIBImageLoad(Filename);		// Load The Bitmap And Return A Pointer
    }

    return NULL;						// If Load Failed Return NULL
}

int LoadGLTextures()						// Load Bitmaps And Convert To Textures
{
    int Status=FALSE;					// Status Indicator

    AUX_RGBImageRec *TextureImage[1];			// Create Storage Space For The Texture

    memset(TextureImage,0,sizeof(void *)*1);		// Set The Pointer To NULL

    if (TextureImage[0]=LoadBMP("Data/Lights.bmp"))		// Load The Bitmap
    {
        Status=TRUE;					// Set The Status To TRUE

        glGenTextures(1, &texture[0]);			// Create The Texture

        // Build Linear Mipmapped Texture
        glBindTexture(GL_TEXTURE_2D, texture[0]);
        gluBuild2DMipmaps(GL_TEXTURE_2D, 3, TextureImage[0]->sizeX, TextureImage[0]->sizeY, GL_RGB, GL_UNSIGNED_BYTE, TextureImage[0]->data);
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR_MIPMAP_NEAREST);
The next four lines of code will automatically generate texture coordinates for any object we draw to the screen. The glTexGen command is extremely powerful, and complex, and to get into all the math involved would be a tutorial on it's own. All you need to know is that GL_S and GL_T are texture coordinates. By default they are set up to take the current x location on the screen and the current y location on the screen and come up with a texture vertex. You'll notice the objects are not textured on the z plane... just stripes appear. The front and back faces are textured though, and that's all that matters. X (GL_S) will cover mapping the texture left to right, and Y (GL_T) will cover mapping the texture up and down.

GL_TEXTURE_GEN_MODE lets us select the mode of texture mapping we want to use on the S and T texture coordinates. You have 3 choices:

GL_EYE_LINEAR - The texture is fixed to the screen. It never moves. The object is mapped with whatever section of the texture it is passing over.

GL_OBJECT_LINEAR - This is the mode we are using. The texture is fixed to the object moving around the screen.

GL_SPHERE_MAP - Everyones favorite. Creates a metalic reflective type object.

It's important to note that I'm leaving out alot of code. We should be setting the GL_OBJECT_PLANE as well, but by default it's set to the parameters we want. Buy a good book if you're interested in learning more, or check out the MSDN help CD / DVD.
        // Texturing Contour Anchored To The Object
        glTexGeni(GL_S, GL_TEXTURE_GEN_MODE, GL_OBJECT_LINEAR);
        // Texturing Contour Anchored To The Object
        glTexGeni(GL_T, GL_TEXTURE_GEN_MODE, GL_OBJECT_LINEAR);
        glEnable(GL_TEXTURE_GEN_S);			// Auto Texture Generation
        glEnable(GL_TEXTURE_GEN_T);			// Auto Texture Generation
    }

    if (TextureImage[0])					// If Texture Exists
    {
        if (TextureImage[0]->data)			// If Texture Image Exists
        {
            free(TextureImage[0]->data);		// Free The Texture Image Memory
        }

        free(TextureImage[0]);				// Free The Image Structure
    }

    return Status;						// Return The Status
}
There are a few new lines at the end of the InitGL() code. BuildFont() has been moved underneath our texture loading code. The line glEnable(GL_COLOR_MATERIAL) has been removed. If you plan to apply colors to the texture using glColor3f(r,g,b) add the line glEnable(GL_COLOR_MATERIAL) back into this section of code.
int InitGL(GLvoid)						// All Setup For OpenGL Goes Here
{
    if (!LoadGLTextures())					// Jump To Texture Loading Routine
    {
        return FALSE;					// If Texture Didn't Load Return FALSE
    }
    BuildFont();						// Build The Font

    glShadeModel(GL_SMOOTH);				// Enable Smooth Shading
    glClearColor(0.0f, 0.0f, 0.0f, 0.5f);			// Black Background
    glClearDepth(1.0f);					// Depth Buffer Setup
    glEnable(GL_DEPTH_TEST);				// Enables Depth Testing
    glDepthFunc(GL_LEQUAL);					// The Type Of Depth Testing To Do
    glEnable(GL_LIGHT0);					// Quick And Dirty Lighting (Assumes Light0 Is Set Up)
    glEnable(GL_LIGHTING);					// Enable Lighting
    glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);	// Really Nice Perspective Calculations
Enable 2D Texture Mapping, and select texture one. This will map texture one onto any 3D object we draw to the screen. If you want more control, you can enable and disable texture mapping yourself.
    glEnable(GL_TEXTURE_2D);				// Enable Texture Mapping
    glBindTexture(GL_TEXTURE_2D, texture[0]);		// Select The Texture
    return TRUE;						// Initialization Went OK
}
The resize code hasn't changed, but our DrawGLScene code has.
int DrawGLScene(GLvoid)						// Here's Where We Do All The Drawing
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);	// Clear The Screen And The Depth Buffer
    glLoadIdentity();					// Reset The View
Here's our first change. Instead of keeping the object in the middle of the screen, we're going to spin it around the screen using COS and SIN (no surprise). We'll translate 3 units into the screen (-3.0f). On the x axis, we'll swing from -1.1 at far left to +1.1 at the right. We'll be using the rot variable to control the left right swing. We'll swing from +0.8 at top to -0.8 at the bottom. We'll use the rot variable for this swinging motion as well. (might as well make good use of your variables).
    // Position The Text
    glTranslatef(1.1f*float(cos(rot/16.0f)),0.8f*float(sin(rot/20.0f)),-3.0f);
Now we do the normal rotations. This will cause the symbol to spin on the X, Y and Z axis.
    glRotatef(rot,1.0f,0.0f,0.0f);				// Rotate On The X Axis
    glRotatef(rot*1.2f,0.0f,1.0f,0.0f);			// Rotate On The Y Axis
    glRotatef(rot*1.4f,0.0f,0.0f,1.0f);			// Rotate On The Z Axis
We translate a little to the left, down, and towards the viewer to center the symbol on each axis. Otherwise when it spins it doesn't look like it's spinning around it's own center. -0.35 is just a number that worked. I had to play around with numbers for a bit because I'm not sure how wide the font is, could vary with each font. Why the fonts aren't built around a central point I'm not sure.
    glTranslatef(-0.35f,-0.35f,0.1f);			// Center On X, Y, Z Axis
Finally we draw our skull and crossbones symbol then increase the rot variable so our symbol spins and moves around the screen. If you can't figure out how I get a skull and crossbones from the letter 'N', do this: Run Microsoft Word or Wordpad. Go to the fonts drop down menu. Select the Wingdings font. Type and uppercase 'N'. A skull and crossbones appears.
    glPrint("N");						// Draw A Skull And Crossbones Symbol
    rot+=0.1f;						// Increase The Rotation Variable
    return TRUE;						// Keep Going
}
The last thing to do is add KillFont() to the end of KillGLWindow() just like I'm showing below. It's important to add this line. It cleans things up before we exit our program.
    if (!UnregisterClass("OpenGL",hInstance))		// Are We Able To Unregister Class
    {
        MessageBox(NULL,"Could Not Unregister Class.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        hInstance=NULL;					// Set hInstance To NULL
    }

    KillFont();						// Destroy The Font
}
Even though I never went into extreme detail, you should have a pretty good understanding on how to make OpenGL generate texture coordinates for you. You should have no problems mapping textures to fonts of your own, or even other objects for that matter. And by changing just two lines of code, you can enable sphere mapping, which is a really cool effect.


Lesson 16 - Cool Looking Fog

Lesson 16
This tutorial brought to you by Chris Aliotta...

So you want to add fog to your OpenGL program? Well in this tutorial I will show you how to do exactly that. This is my first time writing a tutorial, and I am still relatively new to OpenGL/C++ programming, so please, if you find anything that's wrong let me know and don't jump all over me. This code is based on the code from lesson 7.

Data Setup:

We'll start by setting up all our variables needed to hold the information for fog. The variable fogMode will be used to hold three types of fog: GL_EXP, GL_EXP2, and GL_LINEAR. I will explain the differences between these three later on. The variables will start at the beginning of the code after the line GLuint texture[3]. The variable fogfilter will be used to keep track of which fog type we will be using. The variable fogColor will hold the color we wish the fog to be. I have also added the boolean variable gp at the top of the code so we can tell if the 'g' key is being pressed later on in this tutorial.
bool   gp;						// G Pressed? ( New )
GLuint filter;						// Which Filter To Use
GLuint fogMode[]= { GL_EXP, GL_EXP2, GL_LINEAR };	// Storage For Three Types Of Fog
GLuint fogfilter= 0;					// Which Fog To Use
GLfloat fogColor[4]= {0.5f, 0.5f, 0.5f, 1.0f};		// Fog Color
DrawGLScene Setup

Now that we have established our variables we will move down to InitGL. The glClearColor() line has been modified to clear the screen to the same same color as the fog for a better effect. There isn't much code involved to make fog work. In all you will find this to be very simplistic.

glClearColor(0.5f,0.5f,0.5f,1.0f);			// We'll Clear To The Color Of The Fog ( Modified )

glFogi(GL_FOG_MODE, fogMode[fogfilter]);		// Fog Mode
glFogfv(GL_FOG_COLOR, fogColor);			// Set Fog Color
glFogf(GL_FOG_DENSITY, 0.35f);				// How Dense Will The Fog Be
glHint(GL_FOG_HINT, GL_DONT_CARE);			// Fog Hint Value
glFogf(GL_FOG_START, 1.0f);				// Fog Start Depth
glFogf(GL_FOG_END, 5.0f);				// Fog End Depth
glEnable(GL_FOG);					// Enables GL_FOG
Lets pick apart the first three lines of this code. The first line glEnable(GL_FOG); is pretty much self explanatory. It basically initializes the fog.

The second line, glFogi(GL_FOG_MODE, fogMode[fogfilter]); establishes the fog filter mode. Now earlier we declared the array fogMode. It held GL_EXP, GL_EXP2, and GL_LINEAR. Here is when these variables come into play. Let me explain each one:

  • GL_EXP - Basic rendered fog which fogs out all of the screen. It doesn't give much of a fog effect, but gets the job done on older PC's.
  • GL_EXP2 - Is the next step up from GL_EXP. This will fog out all of the screen, however it will give more depth to the scene.
  • GL_LINEAR - This is the best fog rendering mode. Objects fade in and out of the fog much better.

The third line, glFogfv(GL_FOG_COLOR, fogcolor); sets the color of the fog. Earlier we had set this to (0.5f,0.5f,0.5f,1.0f) using the variable fogcolor, giving us a nice grey color.

Next lets look at the last four lines of this code. The line glFogf(GL_FOG_DENSITY, 0.35f); establishes how dense the fog will be. Increase the number and the fog becomes more dense, decrease it and it becomes less dense.

The line glHint (GL_FOG_HINT, GL_DONT_CARE); establishes the hint. I used GL_DONT_CARE, because I didn't care about the hint value. However here is an explanation of the different values for this option, provided by Eric Desrosiers:

Eric Desrosiers Adds: Little explanation of glHint(GL_FOG_HINT, hintval);

hintval can be : GL_DONT_CARE, GL_NICEST or GL_FASTEST

gl_dont_care - Lets opengl choose the kind of fog (per vertex of per pixel) and an unknown formula.
gl_nicest - Makes the fog per pixel (look good)
glfastest - Makes the fog per vertex (faster, but less nice)

The next line glFogf(GL_FOG_START, 1.0f); will establish how close to the screen the fog should start. You can change the number to whatever you want depending on where you want the fog to start. The next line is similar, glFogf(GL_FOG_END, 5.0f);. This tells the OpenGL program how far into the screen the fog should go.

Keypress Events

Now that we've setup the fog drawing code we will add the keyboard commands to cycle through the different fog modes. This code goes down at the end of the program with all the other key handling code.

if (keys['G'] && !gp)					// Is The G Key Being Pressed?
{
    gp=TRUE;					// gp Is Set To TRUE
    fogfilter+=1;					// Increase fogfilter By One
    if (fogfilter>2)				// Is fogfilter Greater Than 2?
    {
        fogfilter=0;				// If So, Set fogfilter To Zero
    }
    glFogi (GL_FOG_MODE, fogMode[fogfilter]);	// Fog Mode
}
if (!keys['G'])						// Has The G Key Been Released?
{
    gp=FALSE;					// If So, gp Is Set To FALSE
}
That's it! We are done! You now have fog in your OpenGL program. I'd have to say that was pretty painless. If you have any questions or comments feel free to contact me at chris@incinerated.com. Also please stop by my website: http://www.incinerated.com/ and http://www.incinerated.com/precursor.

Christopher Aliotta (Precursor)


Lesson 17 - 2D Texture Font

Lesson 17
This tutorial brought to you by NeHe & Giuseppe D'Agata...

I know everyones probably sick of fonts. The text tutorials I've done so far not only display text, they display 3D text, texture mapped text, and can handle variables. But what happens if you're porting your project to a machine that doesn't support Bitmap or Outline fonts?

Thanks to Giuseppe D'Agata we have yet another font tutorial. What could possibly be left you ask!? If you remember in the first Font tutorial I mentioned using textures to draw letters to the screen. Usually when you use textures to draw text to the screen you load up your favorite art program, select a font, then type the letters or phase you want to display. You then save the bitmap and load it into your program as a texture. Not very efficient for a program that require alot of text, or text that continually changes!

This program uses just ONE texture to display any of 256 different characters on the screen. Keep in mind your average character is just 16 pixels wide and roughly 16 pixels tall. If you take your standard 256x256 texture it's easy to see that you can fit 16 letters across, and you can have a total of 16 rows up and down. If you need a more detailed explanation: The texture is 256 pixels wide, a character is 16 pixels wide. 256 divided by 16 is 16 :)

So... Lets create a 2D textured font demo! This program expands on the code from lesson 1. In the first section of the program, we include the math and stdio libraries. We need the math library to move our letters around the screen using SIN and COS, and we need the stdio library to make sure the bitmaps we want to use actually exist before we try to make textures out of them.
#include <windows.h>		// Header File For Windows
#include <math.h>		// Header File For Windows Math Library		( ADD )
#include <stdio.h>		// Header File For Standard Input/Output	( ADD )
#include <gl\gl.h>		// Header File For The OpenGL32 Library
#include <gl\glu.h>		// Header File For The GLu32 Library
#include <gl\glaux.h>		// Header File For The GLaux Library

HDC		hDC=NULL;	// Private GDI Device Context
HGLRC		hRC=NULL;	// Permanent Rendering Context
HWND		hWnd=NULL;	// Holds Our Window Handle
HINSTANCE	hInstance;	// Holds The Instance Of The Application

bool	keys[256];		// Array Used For The Keyboard Routine
bool	active=TRUE;		// Window Active Flag Set To TRUE By Default
bool	fullscreen=TRUE;	// Fullscreen Flag Set To Fullscreen Mode By Default
We're going to add a variable called base to point us to our display lists. We'll also add texture[2] to hold the two textures we're going to create. Texture 1 will be the font texture, and texture 2 will be a bump texture used to create our simple 3D object.

We add the variable loop which we will use to execute loops. Finally we add cnt1 and cnt2 which we will use to move the text around the screen and to spin our simple 3D object.
GLuint	base;			// Base Display List For The Font
GLuint	texture[2];		// Storage For Our Font Texture
GLuint	loop;			// Generic Loop Variable

GLfloat	cnt1;			// 1st Counter Used To Move Text & For Coloring
GLfloat	cnt2;			// 2nd Counter Used To Move Text & For Coloring

LRESULT	CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);				// Declaration For WndProc
Now for the texture loading code. It's exactly the same as it was in the previous texture mapping tutorials.
AUX_RGBImageRec *LoadBMP(char *Filename)					// Loads A Bitmap Image
{
    FILE *File=NULL;							// File Handle
    if (!Filename)								// Make Sure A Filename Was Given
    {
        return NULL;							// If Not Return NULL
    }
    File=fopen(Filename,"r");						// Check To See If The File Exists
    if (File)								// Does The File Exist?
    {
        fclose(File);							// Close The Handle
        return auxDIBImageLoad(Filename);				// Load The Bitmap And Return A Pointer
    }
    return NULL;								// If Load Failed Return NULL
}
The follwing code has also changed very little from the code used in previous tutorials. If you're not sure what each of the following lines do, go back and review.

Note that TextureImage[ ] is going to hold 2 rgb image records. It's very important to double check code that deals with loading or storing our textures. One wrong number could result in a memory leak or crash!
int LoadGLTextures()								// Load Bitmaps And Convert To Textures
{
    int Status=FALSE;							// Status Indicator
    AUX_RGBImageRec *TextureImage[2];					// Create Storage Space For The Textures
The next line is the most important line to watch. If you were to replace the 2 with any other number, major problems will happen. Double check! This number should match the number you used when you set up TextureImages[ ].

The two textures we're going to load are font.bmp (our font), and bumps.bmp. The second texture can be replaced with any texture you want. I wasn't feeling very creative, so the texture I decided to use may be a little drab.
    memset(TextureImage,0,sizeof(void *)*2);				// Set The Pointer To NULL

    if ((TextureImage[0]=LoadBMP("Data/Font.bmp")) &&			// Load The Font Bitmap
        (TextureImage[1]=LoadBMP("Data/Bumps.bmp")))			// Load The Texture Bitmap
    {
        Status=TRUE;							// Set The Status To TRUE
Another important line to double check. I can't begin to tell you how many emails I've received from people asking "why am I only seeing one texture, or why are my textures all white!?!". Usually this line is the problem. If you were to replace the 2 with a 1, only one texture would be created and the second texture would appear all white. If you replaced the 2 with a 3 you're program may crash!

You should only have to call glGenTextures() once. After glGenTextures() you should generate all your textures. I've seen people put a glGenTextures() line before each texture they create. Usually they causes the new texture to overwrite any textures you've already created. It's a good idea to decide how many textures you need to build, call glGenTextures() once, and then build all the textures. It's not wise to put glGenTextures() inside a loop unless you have a reason to.
        glGenTextures(2, &texture[0]);					// Create Two Texture

        for (loop=0; loop<2; loop++)					// Loop Through All The Textures
        {
            // Build All The Textures
            glBindTexture(GL_TEXTURE_2D, texture[loop]);
            glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
            glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
            glTexImage2D(GL_TEXTURE_2D, 0, 3, TextureImage[loop]->sizeX, TextureImage[loop]->sizeY, 0, GL_RGB, GL_UNSIGNED_BYTE, TextureImage[loop]->data);
        }
    }
The following lines of code check to see if the bitmap data we loaded to build our textures is using up ram. If it is, the ram is freed. Notice we check and free both rgb image records. If we used 3 different images to build our textures, we'd check and free 3 rgb image records.
    for (loop=0; loop<2; loop++)
        {
            if (TextureImage[loop])						// If Texture Exists
            {
                if (TextureImage[loop]->data)			// If Texture Image Exists
                {
                    free(TextureImage[loop]->data);		// Free The Texture Image Memory
                }
                free(TextureImage[loop]);			// Free The Image Structure
            }
        }
    return Status;								// Return The Status
}
Now we're going to build our actual font. I'll go through this section of code in some detail. It's not really that complex, but there's a bit of math to understand, and I know math isn't something everyone enjoys.
GLvoid BuildFont(GLvoid)							// Build Our Font Display List
{
The following two variable will be used to hold the position of each letter inside the font texture. cx will hold the position from left to right inside the texture, and cy will hold the position up and down.
    float	cx;								// Holds Our X Character Coord
    float	cy;								// Holds Our Y Character Coord
Next we tell OpenGL we want to build 256 display lists. The variable base will point to the location of the first display list. The second display list will be base+1, the third will be base+2, etc.

The second line of code below selects our font texture (texture[0]).
    base=glGenLists(256);							// Creating 256 Display Lists
    glBindTexture(GL_TEXTURE_2D, texture[0]);				// Select Our Font Texture
Now we start our loop. The loop will build all 256 characters, storing each character in it's own display lists.
    for (loop=0; loop<256; loop++)						// Loop Through All 256 Lists
    {
The first line below may look a little puzzling. The % symbol means the remainder after loop is divided by 16. cx will move us through the font texture from left to right. You'll notice later in the code we subtract cy from 1 to move us from top to bottom instead of bottom to top. The % symbol is fairly hard to explain but I will make an attempt.

All we are really concerned about is (loop%16) the /16.0f just converts the results into texture coordinates. So if loop was equal to 16... cx would equal the remained of 16/16 which would be 0. but cy would equal 16/16 which is 1. So we'd move down the height of one character, and we wouldn't move to the right at all. Now if loop was equal to 17, cx would be equal to 17/16 which would be 1.0625. The remainder .0625 is also equal to 1/16th. Meaning we'd move 1 character to the right. cy would still be equal to 1 because we are only concerned with the number to the left of the decimal. 18/16 would gives us 2 over 16 moving us 2 characters to the right, and still one character down. If loop was 32, cx would once again equal 0, because there is no remained when you divide 32 by 16, but cy would equal 2. Because the number to the left of the decimal would now be 2, moving us down 2 characters from the top of our font texture. Does that make sense?
        cx=float(loop%16)/16.0f;					// X Position Of Current Character
        cy=float(loop/16)/16.0f;					// Y Position Of Current Character
Whew :) Ok. So now we build our 2D font by selecting an individual character from our font texture depending on the value of cx and cy. In the line below we add loop to the value of base if we didn't, every letter would be built in the first display list. We definitely don't want that to happen so by adding loop to base, each character we create is stored in the next available display list.
        glNewList(base+loop,GL_COMPILE);				// Start Building A List
Now that we've selected the display list we want to build, we create our character. This is done by drawing a quad, and then texturing it with just a single character from the font texture.
            glBegin(GL_QUADS);					// Use A Quad For Each Character
cx and cy should be holding a very tiny floating point value from 0.0f to 1.0f. If both cx and cy were equal to 0 the first line of code below would actually be: glTexCoord2f(0.0f,1-0.0f-0.0625f). Remember that 0.0625 is exactly 1/16th of our texture, or the width / height of one character. The texture coordinate below would be the bottom left point of our texture.

Notice we are using glVertex2i(x,y) instead of glVertex3f(x,y,z). Our font is a 2D font, so we don't need the z value. Because we are using an Ortho screen, we don't have to translate into the screen. All you have to do to draw to an Ortho screen is specify an x and y coordinate. Because our screen is in pixels from 0 to 639 and 0 to 479, we don't have to use floating point or negative values either :)

The way we set up our Ortho screen, (0,0) will be at the bottom left of our screen. (640,480) will be the top right of the screen. 0 is the left side of the screen on the x axis, 639 is the right side of the screen on the x axis. 0 is the bottom of the screen on the y axis and 479 is the top of the screen on the y axis. Basically we've gotten rid of negative coordinates. This is also handy for people that don't care about perspective and prefer to work with pixels rather than units :)
                glTexCoord2f(cx,1-cy-0.0625f);			// Texture Coord (Bottom Left)
                glVertex2i(0,0);				// Vertex Coord (Bottom Left)
The next texture coordinate is now 1/16th to the right of the last texture coordinate (exactly one character wide). So this would be the bottom right texture point.
                glTexCoord2f(cx+0.0625f,1-cy-0.0625f);		// Texture Coord (Bottom Right)
                glVertex2i(16,0);				// Vertex Coord (Bottom Right)
The third texture coordinate stays at the far right of our character, but moves up 1/16th of our texture (exactly the height of one character). This will be the top right point of an individual character.
                glTexCoord2f(cx+0.0625f,1-cy);			// Texture Coord (Top Right)
                glVertex2i(16,16);				// Vertex Coord (Top Right)
Finally we move left to set our last texture coordinate at the top left of our character.
                glTexCoord2f(cx,1-cy);				// Texture Coord (Top Left)
                glVertex2i(0,16);				// Vertex Coord (Top Left)
            glEnd();						// Done Building Our Quad (Character)
Finally, we translate 10 pixels to the right, placing us to the right of our texture. If we didn't translate, the letters would all be drawn on top of eachother. Because our font is so narrow, we don't want to move 16 pixels to the right. If we did, there would be big spaces between each letter. Moving by just 10 pixels eliminates the spaces.
            glTranslated(10,0,0);					// Move To The Right Of The Character
        glEndList();							// Done Building The Display List
    }									// Loop Until All 256 Are Built
}
The following section of code is the same code we used in our other font tutorials to free the display list before our program quits. All 256 display lists starting at base will be deleted. (good thing to do!).
GLvoid KillFont(GLvoid)								// Delete The Font From Memory
{
    glDeleteLists(base,256);						// Delete All 256 Display Lists
}
The next section of code is where all of our drawing is done. Everything is fairly new so I'll try to explain each line in great detail. Just a small note: Alot can be added to this code, such as variable support, character sizing, spacing, and alot of checking to restore things to how they were before we decided to print.

glPrint() takes three parameters. The first is the x position on the screen (the position from left to right). Next is the y position on the screen (up and down... 0 at the bottom, bigger numbers at the top). Then we have our actual string (the text we want to print), and finally a variable called set. If you have a look at the bitmap that Giuseppe D'Agata has made, you'll notice there are two different character sets. The first character set is normal, and the second character set is italicized. If set is 0, the first character set is selected. If set is 1 or greater the second character set is selected.
GLvoid glPrint(GLint x, GLint y, char *string, int set)				// Where The Printing Happens
{
The first thing we do is make sure that set is either 0 or 1. If set is greater than 1, we'll make it equal to 1.
    if (set>1)								// Is set Greater Than One?
    {
        set=1;								// If So, Make Set Equal One
    }
Now we select our Font texture. We do this just in case a different texture was selected before we decided to print something to the screen.
    glBindTexture(GL_TEXTURE_2D, texture[0]);				// Select Our Font Texture
Now we disable depth testing. The reason I do this is so that blending works nicely. If you don't disable depth testing, the text may end up going behind something, or blending may not look right. If you have no plan to blend the text onto the screen (so that black spaces do not show up around our letters) you can leave depth testing on.
    glDisable(GL_DEPTH_TEST);						// Disables Depth Testing
The next few lines are VERY important! We select our Projection Matrix. Right after that, we use a command called glPushMatrix(). glPushMatrix stores the current matrix (projection). Kind of like the memory button on a calculator.
    glMatrixMode(GL_PROJECTION);						// Select The Projection Matrix
    glPushMatrix();								// Store The Projection Matrix
Now that our projection matrix has been stored, we reset the matrix and set up our Ortho screen. The first and third numbers (0) represent the bottom left of the screen. We could make the left side of the screen equal -640 if we want, but why would we work with negatives if we don't need to. The second and fourth numbers represent the top right of the screen. It's wise to set these values to match the resolution you are currently in.
    glLoadIdentity();							// Reset The Projection Matrix
    glOrtho(0,640,0,480,-100,100);						// Set Up An Ortho Screen
Now we select our modelview matrix, and store it's current settings using glPushMatrix(). We then reset the modelview matrix so we can work with it using our Ortho view.
    glMatrixMode(GL_MODELVIEW);						// Select The Modelview Matrix
    glPushMatrix();								// Store The Modelview Matrix
    glLoadIdentity();							// Reset The Modelview Matrix
With our perspective settings saved, and our Ortho screen set up, we can now draw our text. We start by translating to the position on the screen that we want to draw our text at. We use glTranslated() instead of glTranslatef() because we are working with actual pixels, so floating point values are not important. After all, you can't have half a pixel :)
    glTranslated(x,y,0);							// Position The Text (0,0 - Bottom Left)
The line below will select which font set we want to use. If we want to use the second font set we add 128 to the current base display list (128 is half of our 256 characters). By adding 128 we skip over the first 128 characters.
    glListBase(base-32+(128*set));						// Choose The Font Set (0 or 1)
Now all that's left for us to do is draw the letters to the screen. We do this exactly the same as we did in all the other font tutorials. We use glCallLists(). strlen(sting) is the length of our string (how many characters we want to draw), GL_BYTE means that each character is represented by a byte (a byte is any value from 0 to 255). Finally, string holds the actual text we want to print to the screen.
    glCallLists(strlen(string),GL_BYTE,string);				// Write The Text To The Screen
All we have to do now is restore our perspective view. We select the projection matrix and use glPopMatrix() to recall the settings we previously stored with glPushMatrix(). It's important to restore things in the opposite order you stored them in.
    glMatrixMode(GL_PROJECTION);						// Select The Projection Matrix
    glPopMatrix();								// Restore The Old Projection Matrix
Now we select the modelview matrix, and do the same thing. We use glPopMatrix() to restore our modelview matrix to what it was before we set up our Ortho display.
    glMatrixMode(GL_MODELVIEW);						// Select The Modelview Matrix
    glPopMatrix();								// Restore The Old Projection Matrix
Finally, we enable depth testing. If you didn't disable depth testing in the code above, you don't need this line.
    glEnable(GL_DEPTH_TEST);						// Enables Depth Testing
}
Nothing has changed in ReSizeGLScene() so we'll skip right to InitGL().
int InitGL(GLvoid)								// All Setup For OpenGL Goes Here
{
We jump to our texture building code. If texture building fails for any reason, we return FALSE. This lets our program know that an error has occurred and the program gracefully shuts down.
    if (!LoadGLTextures())							// Jump To Texture Loading Routine
    {
        return FALSE;							// If Texture Didn't Load Return FALSE
    }
If there were no errors, we jump to our font building code. Not much can go wrong when building the font so we don't bother with error checking.
    BuildFont();								// Build The Font
Now we do our normal GL setup. We set the background clear color to black, the clear depth to 1.0. We choose a depth testing mode, along with a blending mode. We enable smooth shading, and finally we enable 2D texture mapping.
    glClearColor(0.0f, 0.0f, 0.0f, 0.0f);					// Clear The Background Color To Black
    glClearDepth(1.0);							// Enables Clearing Of The Depth Buffer
    glDepthFunc(GL_LEQUAL);							// The Type Of Depth Test To Do
    glBlendFunc(GL_SRC_ALPHA,GL_ONE);					// Select The Type Of Blending
    glShadeModel(GL_SMOOTH);						// Enables Smooth Color Shading
    glEnable(GL_TEXTURE_2D);						// Enable 2D Texture Mapping
    return TRUE;								// Initialization Went OK
}
The section of code below will create our scene. We draw the 3D object first and the text last so that the text appears on top of the 3D object, instead of the 3D object covering up the text. The reason I decide to add a 3D object is to show that both perspective and ortho modes can be used at the same time.
int DrawGLScene(GLvoid)								// Here's Where We Do All The Drawing
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);			// Clear The Screen And The Depth Buffer
    glLoadIdentity();							// Reset The Modelview Matrix
We select our bumps.bmp texture so that we can build our simple little 3D object. We move into the screen 5 units so that we can see the 3D object. We rotate on the z axis by 45 degrees. This will rotate our quad 45 degrees clockwise and makes our quad look more like a diamond than a square.
    glBindTexture(GL_TEXTURE_2D, texture[1]);				// Select Our Second Texture
    glTranslatef(0.0f,0.0f,-5.0f);						// Move Into The Screen 5 Units
    glRotatef(45.0f,0.0f,0.0f,1.0f);					// Rotate On The Z Axis 45 Degrees (Clockwise)
After we have done the 45 degree rotation, we spin the object on both the x axis and y axis based on the variable cnt1 times 30. This causes our object to spin around as if the diamond is spinning on a point.
    glRotatef(cnt1*30.0f,1.0f,1.0f,0.0f);					// Rotate On The X & Y Axis By cnt1 (Left To Right)
We disable blending (we want the 3D object to appear solid), and set the color to bright white. We then draw a single texture mapped quad.
    glDisable(GL_BLEND);							// Disable Blending Before We Draw In 3D
    glColor3f(1.0f,1.0f,1.0f);						// Bright White
    glBegin(GL_QUADS);							// Draw Our First Texture Mapped Quad
        glTexCoord2d(0.0f,0.0f);					// First Texture Coord
        glVertex2f(-1.0f, 1.0f);					// First Vertex
        glTexCoord2d(1.0f,0.0f);					// Second Texture Coord
        glVertex2f( 1.0f, 1.0f);					// Second Vertex
        glTexCoord2d(1.0f,1.0f);					// Third Texture Coord
        glVertex2f( 1.0f,-1.0f);					// Third Vertex
        glTexCoord2d(0.0f,1.0f);					// Fourth Texture Coord
        glVertex2f(-1.0f,-1.0f);					// Fourth Vertex
    glEnd();								// Done Drawing The First Quad
Immediately after we've drawn the first quad, we rotate 90 degrees on both the x axis and y axis. We then draw another quad. The second quad cuts through the middle of the first quad, creating a nice looking shape.
    glRotatef(90.0f,1.0f,1.0f,0.0f);					// Rotate On The X & Y Axis By 90 Degrees (Left To Right)
    glBegin(GL_QUADS);							// Draw Our Second Texture Mapped Quad
        glTexCoord2d(0.0f,0.0f);					// First Texture Coord
        glVertex2f(-1.0f, 1.0f);					// First Vertex
        glTexCoord2d(1.0f,0.0f);					// Second Texture Coord
        glVertex2f( 1.0f, 1.0f);					// Second Vertex
        glTexCoord2d(1.0f,1.0f);					// Third Texture Coord
        glVertex2f( 1.0f,-1.0f);					// Third Vertex
        glTexCoord2d(0.0f,1.0f);					// Fourth Texture Coord
        glVertex2f(-1.0f,-1.0f);					// Fourth Vertex
    glEnd();								// Done Drawing Our Second Quad
After both texture mapped quads have been drawn, we enable enable blending, and draw our text.
    glEnable(GL_BLEND);							// Enable Blending
    glLoadIdentity();							// Reset The View
We use the same fancy coloring code from our other text tutorials. The color is changed gradually as the text moves across the screen.
    // Pulsing Colors Based On Text Position
    glColor3f(1.0f*float(cos(cnt1)),1.0f*float(sin(cnt2)),1.0f-0.5f*float(cos(cnt1+cnt2)));
Then we draw our text. We still use glPrint(). The first parameter is the x position. The second parameter is the y position. The third parameter ("NeHe") is the text to write to the screen, and the last parameter is the character set to use (0 - normal, 1 - italic).

As you can probably guess, we swing the text around the screen using COS and SIN, along with both counters cnt1 and cnt2. If you don't understand what SIN and COS do, go back and read the previous text tutorials.
    glPrint(int((280+250*cos(cnt1))),int(235+200*sin(cnt2)),"NeHe",0);	// Print GL Text To The Screen

    glColor3f(1.0f*float(sin(cnt2)),1.0f-0.5f*float(cos(cnt1+cnt2)),1.0f*float(cos(cnt1)));
    glPrint(int((280+230*cos(cnt2))),int(235+200*sin(cnt1)),"OpenGL",1);	// Print GL Text To The Screen
We set the color to a dark blue and write the author's name at the bottom of the screen. We then write his name to the screen again using bright white letters. The white letters are a little to the right of the blue letters. This creates a shadowed look. (if blending wasn't enabled the effect wouldn't work).
    glColor3f(0.0f,0.0f,1.0f);						// Set Color To Red
    glPrint(int(240+200*cos((cnt2+cnt1)/5)),2,"Giuseppe D'Agata",0);	// Draw Text To The Screen

    glColor3f(1.0f,1.0f,1.0f);						// Set Color To White
    glPrint(int(242+200*cos((cnt2+cnt1)/5)),2,"Giuseppe D'Agata",0);	// Draw Offset Text To The Screen
The last thing we do is increase both our counters at different rates. This causes the text to move, and the 3D object to spin.
    cnt1+=0.01f;								// Increase The First Counter
    cnt2+=0.0081f;								// Increase The Second Counter
    return TRUE;								// Everything Went OK
}
The code in KillGLWindow(), CreateGLWindow() and WndProc() has not changed so we'll skip over it.
int WINAPI WinMain(	HINSTANCE	hInstance,				// Instance
            HINSTANCE	hPrevInstance,				// Previous Instance
            LPSTR		lpCmdLine,				// Command Line Parameters
            int		nCmdShow)				// Window Show State
{
    MSG		msg;							// Windows Message Structure
    BOOL	done=FALSE;							// Bool Variable To Exit Loop

    // Ask The User Which Screen Mode They Prefer
    if (MessageBox(NULL,"Would You Like To Run In Fullscreen Mode?", "Start FullScreen?",MB_YESNO|MB_ICONQUESTION)==IDNO)
    {
        fullscreen=FALSE;						// Windowed Mode
    }
The title of our Window has changed.
    // Create Our OpenGL Window
    if (!CreateGLWindow("NeHe & Giuseppe D'Agata's 2D Font Tutorial",640,480,16,fullscreen))
    {
        return 0;							// Quit If Window Was Not Created
    }

    while(!done)								// Loop That Runs While done=FALSE
    {
        if (PeekMessage(&msg,NULL,0,0,PM_REMOVE))			// Is There A Message Waiting?
        {
            if (msg.message==WM_QUIT)				// Have We Received A Quit Message?
            {
                done=TRUE;					// If So done=TRUE
            }
            else							// If Not, Deal With Window Messages
            {
                TranslateMessage(&msg);				// Translate The Message
                DispatchMessage(&msg);				// Dispatch The Message
            }
        }
        else								// If There Are No Messages
        {
            // Draw The Scene.  Watch For ESC Key And Quit Messages From DrawGLScene()
            if ((active && !DrawGLScene()) || keys[VK_ESCAPE])	// Active?  Was There A Quit Received?
            {
                done=TRUE;					// ESC or DrawGLScene Signalled A Quit
            }
            else							// Not Time To Quit, Update Screen
            {
                SwapBuffers(hDC);				// Swap Buffers (Double Buffering)
            }
        }
    }

    // Shutdown
The last thing to do is add KillFont() to the end of KillGLWindow() just like I'm showing below. It's important to add this line. It cleans things up before we exit our program.
    if (!UnregisterClass("OpenGL",hInstance))		// Are We Able To Unregister Class
    {
        MessageBox(NULL,"Could Not Unregister Class.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        hInstance=NULL;					// Set hInstance To NULL
    }

    KillFont();						// Destroy The Font
}
I think I can officially say that my site now teaches every possible way to write text to the screen {grin}. All in all, I think this is a fairly good tutorial. The code can be used on any computer that can run OpenGL, it's easy to use, and writing text to the screen using this method requires very little processing power.

I'd like to thank Giuseppe D'Agata for the original version of this tutorial. I've modified it heavily, and converted it to the new base code, but without him sending me the code I probably wouldn't have written the tutorial. His version of the code had a few more options, such as spacing the characters, etc, but I make up for it with the extremely cool 3D object {grin}.

I hope everyone enjoys this tutorial. If you have questions, email Giuseppe D'Agata or myself.

Giuseppe D'Agata


Lesson 18 - Quadratics

Lesson 18

Quadratics

Quadratics are a way of drawing complex objects that would usually take a few for loops and some background in trigonometry.

We'll be using the code from lesson seven. We will add 7 variables and modify the texture to add some variety :)
#include <windows.h>					// Header File For Windows
#include <stdio.h>					// Header File For Standard Input/Output
#include <gl\gl.h>					// Header File For The OpenGL32 Library
#include <gl\glu.h>					// Header File For The GLu32 Library
#include <gl\glaux.h>					// Header File For The GLaux Library

HDC		hDC=NULL;				// Private GDI Device Context
HGLRC		hRC=NULL;				// Permanent Rendering Context
HWND		hWnd=NULL;				// Holds Our Window Handle
HINSTANCE	hInstance;				// Holds The Instance Of The Application

bool	keys[256];					// Array Used For The Keyboard Routine
bool	active=TRUE;					// Window Active Flag Set To TRUE By Default
bool	fullscreen=TRUE;				// Fullscreen Flag Set To Fullscreen Mode By Default
bool	light;						// Lighting ON/OFF
bool	lp;						// L Pressed?
bool	fp;						// F Pressed?
bool    sp;						// Spacebar Pressed?	( NEW )

int	part1;						// Start Of Disc	( NEW )
int	part2;						// End Of Disc		( NEW )
int	p1=0;						// Increase 1		( NEW )
int	p2=1;						// Increase 2		( NEW )

GLfloat	xrot;						// X Rotation
GLfloat	yrot;						// Y Rotation
GLfloat xspeed;						// X Rotation Speed
GLfloat yspeed;						// Y Rotation Speed

GLfloat	z=-5.0f;					// Depth Into The Screen

GLUquadricObj *quadratic;				// Storage For Our Quadratic Objects ( NEW )

GLfloat LightAmbient[]=  { 0.5f, 0.5f, 0.5f, 1.0f };	// Ambient Light Values
GLfloat LightDiffuse[]=	 { 1.0f, 1.0f, 1.0f, 1.0f };	// Diffuse Light Values
GLfloat LightPosition[]= { 0.0f, 0.0f, 2.0f, 1.0f };	// Light Position

GLuint	filter;						// Which Filter To Use
GLuint	texture[3];					// Storage for 3 textures
GLuint  object=0;					// Which Object To Draw	( NEW )

LRESULT	CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);	// Declaration For WndProc
Okay now move down to InitGL(), We're going to add 3 lines of code here to initialize our quadratic. Add these 3 lines after you enable light1 but before you return true. The first line of code initializes the Quadratic and creates a pointer to where it will be held in memory. If it can't be created it returns 0. The second line of code creates smooth normals on the quadratic so lighting will look great. Other possible values are GLU_NONE, and GLU_FLAT. Last we enable texture mapping on our quadratic. Texture mapping is kind of awkward and never goes the way you planned as you can tell from the crate texture.
    quadratic=gluNewQuadric();			// Create A Pointer To The Quadric Object ( NEW )
    gluQuadricNormals(quadratic, GLU_SMOOTH);	// Create Smooth Normals ( NEW )
    gluQuadricTexture(quadratic, GL_TRUE);		// Create Texture Coords ( NEW )
Now I decided to keep the cube in this tutorial so you can see how the textures are mapped onto the quadratic object. I decided to move the cube into its own function so when we write the draw function it will appear more clean. Everybody should recognize this code. =P
GLvoid glDrawCube()					// Draw A Cube
{
        glBegin(GL_QUADS);			// Start Drawing Quads
        // Front Face
        glNormal3f( 0.0f, 0.0f, 1.0f);		// Normal Facing Forward
        glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f, -1.0f,  1.0f);	// Bottom Left Of The Texture and Quad
        glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f, -1.0f,  1.0f);	// Bottom Right Of The Texture and Quad
        glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f,  1.0f,  1.0f);	// Top Right Of The Texture and Quad
        glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f,  1.0f,  1.0f);	// Top Left Of The Texture and Quad
        // Back Face
        glNormal3f( 0.0f, 0.0f,-1.0f);		// Normal Facing Away
        glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f, -1.0f);	// Bottom Right Of The Texture and Quad
        glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f,  1.0f, -1.0f);	// Top Right Of The Texture and Quad
        glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f,  1.0f, -1.0f);	// Top Left Of The Texture and Quad
        glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f, -1.0f);	// Bottom Left Of The Texture and Quad
        // Top Face
        glNormal3f( 0.0f, 1.0f, 0.0f);		// Normal Facing Up
        glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f,  1.0f, -1.0f);	// Top Left Of The Texture and Quad
        glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f,  1.0f,  1.0f);	// Bottom Left Of The Texture and Quad
        glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f,  1.0f,  1.0f);	// Bottom Right Of The Texture and Quad
        glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f,  1.0f, -1.0f);	// Top Right Of The Texture and Quad
        // Bottom Face
        glNormal3f( 0.0f,-1.0f, 0.0f);		// Normal Facing Down
        glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f, -1.0f, -1.0f);	// Top Right Of The Texture and Quad
        glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f, -1.0f, -1.0f);	// Top Left Of The Texture and Quad
        glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f,  1.0f);	// Bottom Left Of The Texture and Quad
        glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f,  1.0f);	// Bottom Right Of The Texture and Quad
        // Right face
        glNormal3f( 1.0f, 0.0f, 0.0f);		// Normal Facing Right
        glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f, -1.0f, -1.0f);	// Bottom Right Of The Texture and Quad
        glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f,  1.0f, -1.0f);	// Top Right Of The Texture and Quad
        glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f,  1.0f,  1.0f);	// Top Left Of The Texture and Quad
        glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f,  1.0f);	// Bottom Left Of The Texture and Quad
        // Left Face
        glNormal3f(-1.0f, 0.0f, 0.0f);		// Normal Facing Left
        glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f, -1.0f, -1.0f);	// Bottom Left Of The Texture and Quad
        glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f,  1.0f);	// Bottom Right Of The Texture and Quad
        glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f,  1.0f,  1.0f);	// Top Right Of The Texture and Quad
        glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f,  1.0f, -1.0f);	// Top Left Of The Texture and Quad
    glEnd();					// Done Drawing Quads
}
Next is the DrawGLScene function, here I just wrote a simple if statement to draw the different objects. Also I used a static variable (a local variable that keeps its value everytime it is called) for a cool effect when drawing the partial disk. I'm going to rewrite the whole DrawGLScene function for clarity.

You'll notice that when I talk about the parameters being used I ignore the actual first parameter (quadratic). This parameter is used for all the objects we draw aside from the cube, so I ignore it when I talk about the parameters.
int DrawGLScene(GLvoid)						// Here's Where We Do All The Drawing
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);	// Clear The Screen And The Depth Buffer
    glLoadIdentity();					// Reset The View
    glTranslatef(0.0f,0.0f,z);				// Translate Into The Screen

    glRotatef(xrot,1.0f,0.0f,0.0f);				// Rotate On The X Axis
    glRotatef(yrot,0.0f,1.0f,0.0f);				// Rotate On The Y Axis

    glBindTexture(GL_TEXTURE_2D, texture[filter]);		// Select A Filtered Texture

    // This Section Of Code Is New ( NEW )
    switch(object)						// Check object To Find Out What To Draw
    {
    case 0:							// Drawing Object 1
        glDrawCube();					// Draw Our Cube
        break;						// Done
The second object we create is going to be a Cylinder. The first parameter (1.0f) is the radius of the cylinder at base (bottom). The second parameter (1.0f) is the radius of the cylinder at the top. The third parameter ( 3.0f) is the height of the cylinder (how long it is). The fouth parameter (32) is how many subdivisions there are "around" the Z axis, and finally, the fifth parameter (32) is the amount of subdivisions "along" the Z axis. The more subdivisions there are the more detailed the object is. By increase the amount of subdivisions you add more polygons to the object. So you end up sacrificing speed for quality. Most of the time it's easy to find a happy medium.
    case 1:							// Drawing Object 2
        glTranslatef(0.0f,0.0f,-1.5f);			// Center The Cylinder
        gluCylinder(quadratic,1.0f,1.0f,3.0f,32,32);	// Draw Our Cylinder
        break;						// Done
The third object we create will be a CD shaped disc. The first parameter (0.5f) is the inner radius of the disk. This value can be zero, meaning there will be no hole in the middle. The larger the inner radius is, the bigger the hole in the middle of the disc will be. The second parameter (1.5f) is the outer radius. This value should be larger than the inner radius. If you make this value a little bit larger than the inner radius you will end up with a thing ring. If you make this value alot larger than the inner radius you will end up with a thick ring. The third parameter (32) is the number of slices that make up the disc. Think of slices like the slices in a pizza. The more slices you have, the smoother the outer edge of the disc will be. Finally the fourth parameter (32) is the number of rings that make up the disc. The rings are are similar to the tracks on a record. Circles inside circles. These ring subdivide the disc from the inner radius to the outer radius, adding more detail. Again, the more subdivisions there are, the slow it will run.
    case 2:							// Drawing Object 3
        gluDisk(quadratic,0.5f,1.5f,32,32);		// Draw A Disc (CD Shape)
        break;						// Done
Our fourth object is an object that I know many of you have been dying to figure out. The Sphere! This one is quite simple. The first parameter is the radius of the sphere. In case you're not familiar with radius/diameter, etc, the radius is the distance from the center of the object to the outside of the object. In this case our radius is 1.3f. Next we have our subdivision "around" the Z axis (32), and our subdivision "along" the Z axis (32). The more subdivisions you have the smoother the sphere will look. Spheres usually require quite a few subdivisions to make them look smooth.
    case 3:							// Drawing Object 4
        gluSphere(quadratic,1.3f,32,32);		// Draw A Sphere
        break;						// Done
Our fifth object is created using the same command that we used to create a Cylinder. If you remember, when we were creating the Cylinder the first two parameters controlled the radius of the cylinder at the bottom and the top. To make a cone it makes sense that all we'd have to do is make the radius at one end Zero. This will create a point at one end. So in the code below, we make the radius at the top of the cylinder equal zero. This creates our point, which also creates our cone.
    case 4:							// Drawing Object 5
        glTranslatef(0.0f,0.0f,-1.5f);			// Center The Cone
        gluCylinder(quadratic,1.0f,0.0f,3.0f,32,32);	// A Cone With A Bottom Radius Of .5 And A Height Of 2
        break;						// Done
Our sixth object is created with gluPartialDisc. The object we create using this command will look exactly like the disc we created above, but with the command gluPartialDisk there are two new parameters. The fifth parameter (part1) is the start angle we want to start drawing the disc at. The sixth parameter is the sweep angle. The sweep angle is the distance we travel from the current angle. We'll increase the sweep angle, which causes the disc to be slowly drawn to the screen in a clockwise direction. Once our sweep hits 360 degrees we start to increase the start angle. the makes it appear as if the disc is being erased, then we start all over again!
    case 5:							// Drawing Object 6
        part1+=p1;					// Increase Start Angle
        part2+=p2;					// Increase Sweep Angle

        if(part1>359)					// 360 Degrees
        {
            p1=0;					// Stop Increasing Start Angle
            part1=0;				// Set Start Angle To Zero
            p2=1;					// Start Increasing Sweep Angle
            part2=0;				// Start Sweep Angle At Zero
        }
        if(part2>359)					// 360 Degrees
        {
            p1=1;					// Start Increasing Start Angle
            p2=0;					// Stop Increasing Sweep Angle
        }
        gluPartialDisk(quadratic,0.5f,1.5f,32,32,part1,part2-part1);	// A Disk Like The One Before
        break;						// Done
    };

    xrot+=xspeed;						// Increase Rotation On X Axis
    yrot+=yspeed;						// Increase Rotation On Y Axis
    return TRUE;						// Keep Going
}
Now for the final part, they key input. Just add this where we check the rest of key input.
                if (keys[' '] && !sp)		// Is Spacebar Being Pressed?
                {
                    sp=TRUE;		// If So, Set sp To TRUE
                    object++;		// Cycle Through The Objects
                    if(object>5)		// Is object Greater Than 5?
                        object=0;	// If So, Set To Zero
                }
                if (!keys[' '])			// Has The Spacebar Been Released?
                {
                    sp=FALSE;		// If So, Set sp To FALSE
                }
Thats all! Now you can draw quadratics in OpenGL. Some really impressive things can be done with morphing and quadratics. The animated disc is an example of simple morphing.

GB Schmick (TipTup)
Everyone if you have time go check out my website, TipTup.Com 2000.


Lesson 19 - Particle Engine Using Triangle Strips

Lesson 19
Welcome to Tutorial 19. You've learned alot, and now you want to play. I will introduce one new command in this tutorial... The triangle strip. It's very easy to use, and can help speed up your programs when drawing alot of triangles.

In this tutorial I will teach you how to make a semi-complex Particle Engine. Once you understand how particle engines work, creating effects such as fire, smoke, water fountains and more will be a piece of cake!

I have to warn you however! Until today I had never written a particle engine. I had this idea that the 'famous' particle engine was a very complex piece of code. I've made attempts in the past, but usually gave up after I realized I couldn't control all the points without going crazy.

You might not believe me when I tell you this, but this tutorial was written 100% from scratch. I borrowed no ones ideas, and I had no technical information sitting in front of me. I started thinking about particles, and all of a sudden my head filled with ideas (brain turning on?). Instead of thinking about each particle as a pixel that had to go from point 'A' to point 'B', and do this or that, I decided it would be better to think of each particle as an individual object responding to the environment around it. I gave each particle life, random aging, color, speed, gravitational influence and more.

Soon I had a finished project. I looked up at the clock and realized aliens had come to get me once again. Another 4 hours gone! I remember stopping now and then to drink coffee and blink, but 4 hours... ?

So, although this program in my opinion looks great, and works exactly like I wanted it to, it may not be the proper way to make a particle engine. I don't care personally, as long as it works well, and I can use it in my projects! If you are the type of person that needs to know you're conforming, then spend hours browsing the net looking for information. Just be warned. The few code snippits you do find may appear cryptic :)

This tutorial uses the base code from lesson 1. There is alot of new code however, so I'll rewrite any section of code that contains changes (makes it easier to understand).

Using the code from lesson 1, we'll add 5 new lines of code at the top of our program. The first line (stdio.h) allows us to read data from files. It's the same line we've added to previous tutorials the use texture mapping. The second line defines how many particles were going to create and display on the screen. Define just tells our program that MAX_PARTICLES will equal whatever value we specify. In this case 1000. The third line will be used to toggle 'rainbow mode' off and on. We'll set it to on by default. sp and rp are variables we'll use to prevent the spacebar or return key from rapidly repeating when held down.
#include <windows.h>			// Header File For Windows
#include <stdio.h>			// Header File For Standard Input/Output ( ADD )
#include <gl\gl.h>			// Header File For The OpenGL32 Library
#include <gl\glu.h>			// Header File For The GLu32 Library
#include <gl\glaux.h>			// Header File For The GLaux Library

#define	MAX_PARTICLES	1000		// Number Of Particles To Create ( NEW )

HDC		hDC=NULL;		// Private GDI Device Context
HGLRC		hRC=NULL;		// Permanent Rendering Context
HWND		hWnd=NULL;		// Holds Our Window Handle
HINSTANCE	hInstance;		// Holds The Instance Of The Application

bool	keys[256];			// Array Used For The Keyboard Routine
bool	active=TRUE;			// Window Active Flag Set To TRUE By Default
bool	fullscreen=TRUE;		// Fullscreen Flag Set To Fullscreen Mode By Default
bool	rainbow=true;			// Rainbow Mode?	( ADD )
bool	sp;				// Spacebar Pressed?	( ADD )
bool	rp;				// Return Key Pressed?	( ADD )
The next 4 lines are misc variables. The variable slowdown controls how fast the particles move. The higher the number, the slower they move. The lower the number, the faster they move. If the value is set to low, the particles will move way too fast! The speed the particles travel at will affect how they move on the screen. Slow particles will not shoot out as far. Keep this in mind.

The variables xspeed and yspeed allow us to control the direction of the tail. xspeed will be added to the current speed a particle is travelling on the x axis. If xspeed is a positive value our particle will be travelling more to the right. If xspeed is a negative value, our particle will travel more to the left. The higher the value, the more it travels in that direction. yspeed works the same way, but on the y axis. The reason I say 'MORE' in a specific direction is because other factors affect the direction our particle travels. xspeed and yspeed help to move the particle in the direction we want.

Finally we have the variable zoom. We use this variable to pan into and out of our scene. With particle engines, it's nice to see more of the screen at times, and cool to zoom in real close other times.
float	slowdown=2.0f;			// Slow Down Particles
float	xspeed;				// Base X Speed (To Allow Keyboard Direction Of Tail)
float	yspeed;				// Base Y Speed (To Allow Keyboard Direction Of Tail)
float	zoom=-40.0f;			// Used To Zoom Out
Now we set up a misc loop variable called loop. We'll use this to predefine the particles and to draw the particles to the screen. col will be use to keep track of what color to make the particles. delay will be used to cycle through the colors while in rainbow mode.

Finally, we set aside storage space for one texture (the particle texture). I decided to use a texture rather than OpenGL points for a few reasons. The most important reason is because points are not all that fast, and they look pretty blah. Secondly, textures are way more cool :) You can use a square particle, a tiny picture of your face, a picture of a star, etc. More control!
GLuint	loop;				// Misc Loop Variable
GLuint	col;				// Current Color Selection
GLuint	delay;				// Rainbow Effect Delay
GLuint	texture[1];			// Storage For Our Particle Texture
Ok, now for the fun stuff. The next section of code creates a structure describing a single particle. This is where we give the particle certain characteristics.

We start off with the boolean variable active. If this variable is TRUE, our particle is alive and kicking. If it's FALSE our particle is dead or we've turned it off! In this program I don't use active, but it's handy to include.

The variables life and fade control how long the particle is displayed, and how bright the particle is while it's alive. The variable life is gradually decreased by the value stored in fade. In this program that will cause some particles to burn longer than others.
typedef struct						// Create A Structure For Particle
{
    bool	active;					// Active (Yes/No)
    float	life;					// Particle Life
    float	fade;					// Fade Speed
The variables r, g and b hold the red intensity, green intensity and blue intensity of our particle. The closer r is to 1.0f, the more red the particle will be. Making all 3 variables 1.0f will create a white particle.
    float	r;					// Red Value
    float	g;					// Green Value
    float	b;					// Blue Value
The variables x, y and z control where the particle will be displayed on the screen. x holds the location of our particle on the x axis. y holds the location of our particle on the y axis, and finally z holds the location of our particle on the z axis.
    float	x;					// X Position
    float	y;					// Y Position
    float	z;					// Z Position
The next three variables are important. These three variables control how fast a particle is moving on specific axis, and what direction to move. If xi is a negative value our particle will move left. Positive it will move right. If yi is negative our particle will move down. Positive it will move up. Finally, if zi is negative the particle will move into the screen, and postive it will move towards the viewer.
    float	xi;					// X Direction
    float	yi;					// Y Direction
    float	zi;					// Z Direction
Lastly, 3 more variables! Each of these variables can be thought of as gravity. If xg is a positive value, our particle will pull to the right. If it's negative our particle will be pulled to the left. So if our particle is moving left (negative) and we apply a positive gravity, the speed will eventually slow so much that our particle will start moving the opposite direction. yg pulls up or down and zg pulls towards or away from the viewer.
    float	xg;					// X Gravity
    float	yg;					// Y Gravity
    float	zg;					// Z Gravity
particles is the name of our structure.
}
particles;						// Particles Structure
Next we create an array called particle. This array will store MAX_PARTICLES. Translated into english we create storage for 1000 (MAX_PARTICLES) particles. This storage space will store the information for each individual particle.
particles particle[MAX_PARTICLES];			// Particle Array (Room For Particle Info)
We cut back on the amount of code required for this program by storing our 12 different colors in a color array. For each color from 1 to 12 we store the red intensity, the green intensity, and finally the blue intensity. The color table below stores 12 different colors fading from red to violet.
static GLfloat colors[12][3]=				// Rainbow Of Colors
{
    {1.0f,0.5f,0.5f},{1.0f,0.75f,0.5f},{1.0f,1.0f,0.5f},{0.75f,1.0f,0.5f},
    {0.5f,1.0f,0.5f},{0.5f,1.0f,0.75f},{0.5f,1.0f,1.0f},{0.5f,0.75f,1.0f},
    {0.5f,0.5f,1.0f},{0.75f,0.5f,1.0f},{1.0f,0.5f,1.0f},{1.0f,0.5f,0.75f}
};

LRESULT	CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);	// Declaration For WndProc
Our bitmap loading code hasn't changed.
AUX_RGBImageRec *LoadBMP(char *Filename)		// Loads A Bitmap Image
{
    FILE *File=NULL;				// File Handle
    if (!Filename)					// Make Sure A Filename Was Given
    {
        return NULL;				// If Not Return NULL
    }

    File=fopen(Filename,"r");			// Check To See If The File Exists
    if (File)					// Does The File Exist?
    {
        fclose(File);				// Close The Handle
        return auxDIBImageLoad(Filename);	// Load The Bitmap And Return A Pointer
    }
    return NULL;					// If Load Failed Return NULL
}
This is the section of code that loads the bitmap (calling the code above) and converts it into a textures. Status is used to keep track of whether or not the texture was loaded and created.
int LoadGLTextures()						// Load Bitmaps And Convert To Textures
{
    int Status=FALSE;					// Status Indicator

    AUX_RGBImageRec *TextureImage[1];			// Create Storage Space For The Texture

    memset(TextureImage,0,sizeof(void *)*1);		// Set The Pointer To NULL
Our texture loading code will load in our particle bitmap and convert it to a linear filtered texture.
    if (TextureImage[0]=LoadBMP("Data/Particle.bmp"))	// Load Particle Texture
    {
        Status=TRUE;					// Set The Status To TRUE
        glGenTextures(1, &texture[0]);			// Create One Textures

        glBindTexture(GL_TEXTURE_2D, texture[0]);
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
        glTexImage2D(GL_TEXTURE_2D, 0, 3, TextureImage[0]->sizeX, TextureImage[0]->sizeY, 0, GL_RGB, GL_UNSIGNED_BYTE, TextureImage[0]->data);
    }

    if (TextureImage[0])					// If Texture Exists
    {
        if (TextureImage[0]->data)			// If Texture Image Exists
        {
            free(TextureImage[0]->data);		// Free The Texture Image Memory
        }
        free(TextureImage[0]);				// Free The Image Structure
    }
    return Status;						// Return The Status
}
The only change I made to the resize code was a deeper viewing distance. Instead of 100.0f, we can now view particles 200.0f units into the screen.
GLvoid ReSizeGLScene(GLsizei width, GLsizei height)		// Resize And Initialize The GL Window
{
    if (height==0)						// Prevent A Divide By Zero By
    {
        height=1;					// Making Height Equal One
    }

    glViewport(0, 0, width, height);			// Reset The Current Viewport

    glMatrixMode(GL_PROJECTION);				// Select The Projection Matrix
    glLoadIdentity();					// Reset The Projection Matrix

    // Calculate The Aspect Ratio Of The Window
    gluPerspective(45.0f,(GLfloat)width/(GLfloat)height,0.1f,200.0f);	 ( MODIFIED )

    glMatrixMode(GL_MODELVIEW);				// Select The Modelview Matrix
    glLoadIdentity();					// Reset The Modelview Matrix
}
If you're using the lesson 1 code, replace it with the code below. I've added code to load in our texture and set up blending for our particles.
int InitGL(GLvoid)								// All Setup For OpenGL Goes Here
{
    if (!LoadGLTextures())							// Jump To Texture Loading Routine
    {
        return FALSE;							// If Texture Didn't Load Return FALSE
    }
We enable smooth shading, clear our background to black, enable depth testing, blending and texture mapping. After enabling texture mapping we select our particle texture.
    glShadeModel(GL_SMOOTH);						// Enables Smooth Shading
    glClearColor(0.0f,0.0f,0.0f,0.0f);					// Black Background
    glClearDepth(1.0f);							// Depth Buffer Setup
    glEnable(GL_DEPTH_TEST);						// Enables Depth Testing
    glEnable(GL_BLEND);							// Enable Blending
    glBlendFunc(GL_SRC_ALPHA,GL_ONE);					// Type Of Blending To Perform
    glHint(GL_PERSPECTIVE_CORRECTION_HINT,GL_NICEST);			// Really Nice Perspective Calculations
    glHint(GL_POINT_SMOOTH_HINT,GL_NICEST);					// Really Nice Point Smoothing
    glEnable(GL_TEXTURE_2D);						// Enable Texture Mapping
    glBindTexture(GL_TEXTURE_2D,texture[0]);				// Select Our Texture
The code below will initialize each of the particles. We start off by activating each particle. If a particle is not active, it won't appear on the screen, no matter how much life it has.

After we've made the particle active, we give it life. I doubt the way I apply life, and fade the particles is the best way, but once again, it works good! Full life is 1.0f. This also gives the particle full brightness.
    for (loop=0;loop<MAX_PARTICLES;loop++)					// Initials All The Textures
    {
        particle[loop].active=true;					// Make All The Particles Active
        particle[loop].life=1.0f;					// Give All The Particles Full Life
We set how fast the particle fades out by giving fade a random value. The variable life will be reduced by fade each time the particle is drawn. The value we end up with will be a random value from 0 to 99. We then divide it by 1000 so that we get a very tiny floating point value. Finally we then add .003 to the final result so that the fade speed is never 0.
        particle[loop].fade=float(rand()%100)/1000.0f+0.003f;		// Random Fade Speed
Now that our particle is active, and we've given it life, it's time to give it some color. For the initial effect, we want each particle to be a different color. What I do is make each particle one of the 12 colors that we've built in our color table at the top of this program. The math is simple. We take our loop variable and add one to it to prevent a divide by zero error. Then we divide loop by the number of particles we plan to create divided by the number of colors in our table +1.

If loop is 0 the result would be 0+1/(1000/12)=0.012. Because the result is an integer value, that will be rounded down to 0 (our first color). If loop was 1000 (maximum amount of particles), the result would be 1000+1/(1000/12)=12.012. Rounded as an integer the result would be 12 which is our last color.
        particle[loop].r=colors[(loop+1)/(MAX_PARTICLES/12)][0];	// Select Red Rainbow Color
        particle[loop].g=colors[(loop+1)/(MAX_PARTICLES/12)][1];	// Select Green Rainbow Color
        particle[loop].b=colors[(loop+1)/(MAX_PARTICLES/12)][2];	// Select Blue Rainbow Color
Now we'll set the direction that each particle moves, along with the speed. We're going to multiply the results by 10.0f to create a spectacular explosion when the program first starts.

We'll end up with either a positive or negative random value. This value will be used to move the particle in a random direction at a random speed.
        particle[loop].xi=float((rand()%50)-26.0f)*10.0f;		// Random Speed On X Axis
        particle[loop].yi=float((rand()%50)-25.0f)*10.0f;		// Random Speed On Y Axis
        particle[loop].zi=float((rand()%50)-25.0f)*10.0f;		// Random Speed On Z Axis
Finally, we set the amount of gravity acting on each particle. Unlike regular gravity that just pulls things down, our gravity can pull up, down, left, right, forward or backward. To start out we want semi strong gravity pulling downwards. To do this we set xg to 0.0f. No pull left or right on the x plane. We set yg to -0.8f. This creates a semi-strong pull downwards. If the value was positive it would pull upwards. We don't want the particles pulling towards or away from us so we'll set zg to 0.0f.
        particle[loop].xg=0.0f;						// Set Horizontal Pull To Zero
        particle[loop].yg=-0.8f;					// Set Vertical Pull Downward
        particle[loop].zg=0.0f;						// Set Pull On Z Axis To Zero
    }
    return TRUE;								// Initialization Went OK
}
Now for the fun stuff. The next section of code is where we draw the particle, check for gravity, etc. It's important that you understand what's going on, so please read carefully :)

We reset the Modelview Matrix only once. We'll position the particles using the glVertex3f() command instead of using tranlations, that way we don't alter the modelview matrix while drawing our particles.
int DrawGLScene(GLvoid)								// Where We Do All The Drawing
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);			// Clear Screen And Depth Buffer
    glLoadIdentity();							// Reset The ModelView Matrix
We start off by creating a loop. This loop will update each one of our particles.
    for (loop=0;loop<MAX_PARTICLES;loop++)					// Loop Through All The Particles
    {
First thing we do is check to see if the particle is active. If it's not active, it wont be updated. In this program they're all active, all the time. But in a program of your own, you may want to make certain particles inactive.
        if (particle[loop].active)					// If The Particle Is Active
        {
The next three variables x, y and z are temporary variables that we'll use to hold the particles x, y and z position. Notice we add zoom to the z position so that our scene is moved into the screen based on the value stored in zoom. particle[loop].x holds our x position for whatever particle we are drawing (particle loop). particle[loop].y holds our y position for our particle and particle[loop].z holds our z position.
            float x=particle[loop].x;				// Grab Our Particle X Position
            float y=particle[loop].y;				// Grab Our Particle Y Position
            float z=particle[loop].z+zoom;				// Particle Z Pos + Zoom
Now that we have the particle position, we can color the particle. particle[loop].r holds the red intensity of our particle, particle[loop].g holds our green intensity, and particle[loop].b holds our blue intensity. Notice I use the particles life for the alpha value. As the particle dies, it becomes more and more transparent, until it eventually doesn't exist. That's why the particles life should never be more than 1.0f. If you need the particles to burn longer, try reducing the fade speed so that the particle doesn't fade out as fast.
            // Draw The Particle Using Our RGB Values, Fade The Particle Based On It's Life
            glColor4f(particle[loop].r,particle[loop].g,particle[loop].b,particle[loop].life);
We have the particle position and the color is set. All that we have to do now is draw our particle. Instead of using a textured quad, I've decided to use a textured triangle strip to speed the program up a bit. Most 3D cards can draw triangles alot faster than they can draw quads. Some 3D cards will convert the quad to two triangles for you, but some don't. So we'll do the work ourselves. We start off by telling OpenGL we want to draw a triangle strip.
            glBegin(GL_TRIANGLE_STRIP);				// Build Quad From A Triangle Strip
Quoted directly from the red book: A triangle strip draws a series of triangles (three sided polygons) using vertices V0, V1, V2, then V2, V1, V3 (note the order), then V2, V3, V4, and so on. The ordering is to ensure that the triangles are all drawn with the same orientation so that the strip can correctly form part of a surface. Preserving the orientation is important for some operations, such as culling. There must be at least 3 points for anything to be drawn.

So the first triangle is drawn using vertices 0, 1 and 2. If you look at the picture you'll see that vertex points 0, 1 and 2 do indeed make up the first triangle (top right, top left, bottom right). The second triangle is drawn using vertices 2, 1 and 3. Again, if you look at the picture, vertices 2, 1 and 3 create the second triangle (bottom right, top left, bottom left). Notice that both triangles are drawn with the same winding (counter-clockwise orientation). I've seen quite a few web sites that claim every second triangle is wound the opposite direction. This is not the case. OpenGL will rearrange the vertices to ensure that all of the triangles are wound the same way!

There are two good reasons to use triangle strips. First, after specifying the first three vertices for the initial triangle, you only need to specify a single point for each additional triangle. That point will be combined with 2 previous vertices to create a triangle. Secondly, by cutting back the amount of data needed to create a triangle your program will run quicker, and the amount of code or data required to draw an object is greatly reduced.

Note: The number of triangles you see on the screen will be the number of vertices you specify minus 2. In the code below we have 4 vertices and we see two triangles.
                glTexCoord2d(1,1); glVertex3f(x+0.5f,y+0.5f,z); // Top Right
                glTexCoord2d(0,1); glVertex3f(x-0.5f,y+0.5f,z); // Top Left
                glTexCoord2d(1,0); glVertex3f(x+0.5f,y-0.5f,z); // Bottom Right
                glTexCoord2d(0,0); glVertex3f(x-0.5f,y-0.5f,z); // Bottom Left
Finally we tell OpenGL that we are done drawing our triangle strip.
            glEnd();						// Done Building Triangle Strip
Now we can move the particle. The math below may look strange, but once again, it's pretty simple. First we take the current particle x position. Then we add the x movement value to the particle divided by slowdown times 1000. So if our particle was in the center of the screen on the x axis (0), our movement variable (xi) for the x axis was +10 (moving us to the right) and slowdown was equal to 1, we would be moving to the right by 10/(1*1000), or 0.01f. If we increase the slowdown to 2 we'll only be moving at 0.005f. Hopefully that helps you understand how slowdown works.

That's also why multiplying the start values by 10.0f made the pixels move alot faster, creating an explosion.

We use the same formula for the y and z axis to move the particle around on the screen.
            particle[loop].x+=particle[loop].xi/(slowdown*1000);	// Move On The X Axis By X Speed
            particle[loop].y+=particle[loop].yi/(slowdown*1000);	// Move On The Y Axis By Y Speed
            particle[loop].z+=particle[loop].zi/(slowdown*1000);	// Move On The Z Axis By Z Speed
After we've calculated where to move the particle to next, we have to apply gravity or resistance. In the first line below, we do this by adding our resistance (xg) to the speed we are moving at (xi).

Lets say our moving speed was 10 and our resistance was 1. Each time our particle was drawn resistance would act on it. So the second time it was drawn, resistance would act, and our moving speed would drop from 10 to 9. This causes the particle to slow down a bit. The third time the particle is drawn, resistance would act again, and our moving speed would drop to 8. If the particle burns for more than 10 redraws, it will eventually end up moving the opposite direction because the moving speed would become a negative value.

The resistance is applied to the y and z moving speed the same way it's applied to the x moving speed.
            particle[loop].xi+=particle[loop].xg;			// Take Pull On X Axis Into Account
            particle[loop].yi+=particle[loop].yg;			// Take Pull On Y Axis Into Account
            particle[loop].zi+=particle[loop].zg;			// Take Pull On Z Axis Into Account
The next line takes some life away from the particle. If we didn't do this, the particle would never burn out. We take the current life of the particle and subtract the fade value for that particle. Each particle will have a different fade value, so they'll all burn out at different speeds.
            particle[loop].life-=particle[loop].fade;		// Reduce Particles Life By 'Fade'
Now we check to see if the particle is still alive after having life taken from it.
            if (particle[loop].life<0.0f)					// If Particle Is Burned Out
            {
If the particle is dead (burnt out), we'll rejuvenate it. We do this by giving it full life and a new fade speed.
                particle[loop].life=1.0f;				// Give It New Life
                particle[loop].fade=float(rand()%100)/1000.0f+0.003f;	// Random Fade Value
We also reset the particles position to the center of the screen. We do this by resetting the x, y and z positions of the particle to zero.
                particle[loop].x=0.0f;					// Center On X Axis
                particle[loop].y=0.0f;					// Center On Y Axis
                particle[loop].z=0.0f;					// Center On Z Axis
After the particle has been reset to the center of the screen, we give it a new moving speed / direction. Notice I've increased the maximum and minimum speed that the particle can move at from a random value of 50 to a value of 60, but this time we're not going to multiply the moving speed by 10. We don't want an explosion this time around, we want slower moving particles.

Also notice that I add xspeed to the x axis moving speed, and yspeed to the y axis moving speed. This gives us control over what direction the particles move later in the program.
                particle[loop].xi=xspeed+float((rand()%60)-32.0f);	// X Axis Speed And Direction
                particle[loop].yi=yspeed+float((rand()%60)-30.0f);	// Y Axis Speed And Direction
                particle[loop].zi=float((rand()%60)-30.0f);		// Z Axis Speed And Direction
Lastly we assign the particle a new color. The variable col holds a number from 0 to 11 (12 colors). We use this variable to look of the red, green and blue intensities in our color table that we made at the beginning of the program. The first line below sets the red (r) intensity to the red value stored in colors[col][0]. So if col was 0, the red intensity would be 1.0f. The green and blue values are read the same way.

If you don't understand how I got the value of 1.0f for the red intensity if col is 0, I'll explain in a bit more detail. Look at the very top of the program. Find the line: static GLfloat colors[12][3]. Notice there are 12 groups of 3 number. The first of the three number is the red intensity. The second value is the green intensity and the third value is the blue intensity. [0], [1] and [2] below represent the 1st, 2nd and 3rd values I just mentioned. If col is equal to 0, we want to look at the first group. 11 is the last group (12th color).
                particle[loop].r=colors[col][0];			// Select Red From Color Table
                particle[loop].g=colors[col][1];			// Select Green From Color Table
                particle[loop].b=colors[col][2];			// Select Blue From Color Table
            }
The line below controls how much gravity there is pulling upward. By pressing 8 on the number pad, we increase the yg (y gravity) variable. This causes a pull upwards. This code is located here in the program because it makes our life easier by applying the gravity to all of our particles thanks to the loop. If this code was outside the loop we'd have to create another loop to do the same job, so we might as well do it here.
            // If Number Pad 8 And Y Gravity Is Less Than 1.5 Increase Pull Upwards
            if (keys[VK_NUMPAD8] && (particle[loop].yg<1.5f)) particle[loop].yg+=0.01f;
This line has the exact opposite affect. By pressing 2 on the number pad we decrease yg creating a stronger pull downwards.
            // If Number Pad 2 And Y Gravity Is Greater Than -1.5 Increase Pull Downwards
            if (keys[VK_NUMPAD2] && (particle[loop].yg>-1.5f)) particle[loop].yg-=0.01f;
Now we modify the pull to the right. If the 6 key on the number pad is pressed, we increase the pull to the right.
            // If Number Pad 6 And X Gravity Is Less Than 1.5 Increase Pull Right
            if (keys[VK_NUMPAD6] && (particle[loop].xg<1.5f)) particle[loop].xg+=0.01f;
Finally, if the 4 key on the number pad is pressed, our particle will pull more to the left. These keys give us some really cool results. For example, you can make a stream of particles shooting straight up in the air. By adding some gravity pulling downwards you can turn the stream of particles into a fountain of water!
            // If Number Pad 4 And X Gravity Is Greater Than -1.5 Increase Pull Left
            if (keys[VK_NUMPAD4] && (particle[loop].xg>-1.5f)) particle[loop].xg-=0.01f;
I added this bit of code just for fun. My brother thought the explosion was a cool effect :) By pressing the tab key all the particles will be reset back to the center of the screen. The moving speed of the particles will once again be multiplied by 10, creating a big explosion of particles. After the particles fade out, your original effect will again reappear.
            if (keys[VK_TAB])						// Tab Key Causes A Burst
            {
                particle[loop].x=0.0f;					// Center On X Axis
                particle[loop].y=0.0f;					// Center On Y Axis
                particle[loop].z=0.0f;					// Center On Z Axis
                particle[loop].xi=float((rand()%50)-26.0f)*10.0f;	// Random Speed On X Axis
                particle[loop].yi=float((rand()%50)-25.0f)*10.0f;	// Random Speed On Y Axis
                particle[loop].zi=float((rand()%50)-25.0f)*10.0f;	// Random Speed On Z Axis
            }
        }
    }
    return TRUE;									// Everything Went OK
}
The code in KillGLWindow(), CreateGLWindow() and WndProc() hasn't changed, so we'll skip down to WinMain(). I'll rewrite the entire section of code to make it easier to follow through the code.
int WINAPI WinMain(	HINSTANCE	hInstance,			// Instance
            HINSTANCE	hPrevInstance,			// Previous Instance
            LPSTR		lpCmdLine,			// Command Line Parameters
            int		nCmdShow)			// Window Show State
{
    MSG	msg;							// Windows Message Structure
    BOOL	done=FALSE;						// Bool Variable To Exit Loop

    // Ask The User Which Screen Mode They Prefer
    if (MessageBox(NULL,"Would You Like To Run In Fullscreen Mode?", "Start FullScreen?",MB_YESNO|MB_ICONQUESTION)==IDNO)
    {
        fullscreen=FALSE;					// Windowed Mode
    }

    // Create Our OpenGL Window
    if (!CreateGLWindow("NeHe's Particle Tutorial",640,480,16,fullscreen))
    {
        return 0;						// Quit If Window Was Not Created
    }
This is our first change to WinMain(). I've added some code to check if the user decide to run in fullscreen mode or windowed mode. If they decide to use fullscreen mode, I change the variable slowdown to 1.0f instead of 2.0f. You can leave this bit code out if you want. I added the code to speed up fullscreen mode on my 3dfx (runs ALOT slower than windowed mode for some reason).
    if (fullscreen)							// Are We In Fullscreen Mode ( ADD )
    {
        slowdown=1.0f;						// Speed Up The Particles (3dfx Issue) ( ADD )
    }

    while(!done)							// Loop That Runs Until done=TRUE
    {
        if (PeekMessage(&msg,NULL,0,0,PM_REMOVE))		// Is There A Message Waiting?
        {
            if (msg.message==WM_QUIT)			// Have We Received A Quit Message?
            {
                done=TRUE;				// If So done=TRUE
            }
            else						// If Not, Deal With Window Messages
            {
                TranslateMessage(&msg);			// Translate The Message
                DispatchMessage(&msg);			// Dispatch The Message
            }
        }
        else							// If There Are No Messages
        {
            if ((active && !DrawGLScene()) || keys[VK_ESCAPE])	// Updating View Only If Active
            {
                done=TRUE;				// ESC or DrawGLScene Signalled A Quit
            }
            else						// Not Time To Quit, Update Screen
            {
                SwapBuffers(hDC);			// Swap Buffers (Double Buffering)
I was a little sloppy with the next bit of code. Usually I don't include everything on one line, but it makes the code look a little cleaner :)

The line below checks to see if the + key on the number pad is being pressed. If it is and slowdown is greater than 1.0f we decrease slowdown by 0.01f. This causes the particles to move faster. Remember in the code above when I talked about slowdown and how it affects the speed at which the particles travel.
                if (keys[VK_ADD] && (slowdown>1.0f)) slowdown-=0.01f;		// Speed Up Particles
This line checks to see if the - key on the number pad is being pressed. If it is and slowdown is less than 4.0f we increase the value of slowdown. This causes our particles to move slower. I put a limit of 4.0f because I wouldn't want them to move much slower. You can change the minimum and maximum speeds to whatever you want :)
                if (keys[VK_SUBTRACT] && (slowdown<4.0f)) slowdown+=0.01f;	// Slow Down Particles
The line below check to see if Page Up is being pressed. If it is, the variable zoom is increased. This causes the particles to move closer to us.
                if (keys[VK_PRIOR]) zoom+=0.1f;		// Zoom In
This line has the opposite effect. By pressing Page Down, zoom is decreased and the scene moves futher into the screen. This allows us to see more of the screen, but it makes the particles smaller.
                if (keys[VK_NEXT]) zoom-=0.1f;		// Zoom Out
The next section of code checks to see if the return key has been pressed. If it has and it's not being 'held' down, we'll let the computer know it's being pressed by setting rp to true. Then we'll toggle rainbow mode. If rainbow was true, it will become false. If it was false, it will become true. The last line checks to see if the return key was released. If it was, rp is set to false, telling the computer that the key is no longer being held down.
                if (keys[VK_RETURN] && !rp)		// Return Key Pressed
                {
                    rp=true;			// Set Flag Telling Us It's Pressed
                    rainbow=!rainbow;		// Toggle Rainbow Mode On / Off
                }
                if (!keys[VK_RETURN]) rp=false;		// If Return Is Released Clear Flag
The code below is a little confusing. The first line checks to see if the spacebar is being pressed and not held down. It also check to see if rainbow mode is on, and if so, it checks to see if the variable delay is greater than 25. delay is a counter I use to create the rainbow effect. If you were to change the color ever frame, the particles would all be a different color. By creating a delay, a group of particles will become one color, before the color is changed to something else.

If the spacebar was pressed or rainbow is on and delay is greater than 25, the color will be changed!
                if ((keys[' '] && !sp) || (rainbow && (delay>25)))	// Space Or Rainbow Mode
                {
The line below was added so that rainbow mode would be turned off if the spacebar was pressed. If we didn't turn off rainbow mode, the colors would continue cycling until the return key was pressed again. It makes sense that if the person is hitting space instead of return that they want to go through the colors themselves.
                    if (keys[' ']) rainbow=false;	// If Spacebar Is Pressed Disable Rainbow Mode
If the spacebar was pressed or rainbow mode is on, and delay is greater than 25, we'll let the computer know that space has been pressed by making sp equal true. Then we'll set the delay back to 0 so that it can start counting back up to 25. Finally we'll increase the variable col so that the color will change to the next color in the color table.
                    sp=true;			// Set Flag Telling Us Space Is Pressed
                    delay=0;			// Reset The Rainbow Color Cycling Delay
                    col++;				// Change The Particle Color
If the color is greater than 11, we reset it back to zero. If we didn't reset col to zero, our program would try to find a 13th color. We only have 12 colors! Trying to get information about a color that doesn't exist would crash our program.
                    if (col>11) col=0;		// If Color Is To High Reset It
                }
Lastly if the spacebar is no longer being pressed, we let the computer know by setting the variable sp to false.
                if (!keys[' '])	sp=false;		// If Spacebar Is Released Clear Flag
Now for some control over the particles. Remember that we created 2 variables at the beginning of our program? One was called xspeed and one was called yspeed. Also remember that after the particle burned out, we gave it a new moving speed and added the new speed to either xspeed or yspeed. By doing that we can influence what direction the particles will move when they're first created.

For example. Say our particle had a moving speed of 5 on the x axis and 0 on the y axis. If we decreased xspeed until it was -10, we would be moving at a speed of -10 (xspeed) + 5 (original moving speed). So instead of moving at a rate of 10 to the right we'd be moving at a rate of -5 to the left. Make sense?

Anyways. The line below checks to see if the up arrow is being pressed. If it is, yspeed will be increased. This will cause our particles to move upwards. The particles will move at a maximum speed of 200 upwards. Anything faster than that doesn't look to good.
                // If Up Arrow And Y Speed Is Less Than 200 Increase Upward Speed
                if (keys[VK_UP] && (yspeed<200)) yspeed+=1.0f;
This line checks to see if the down arrow is being pressed. If it is, yspeed will be decreased. This will cause the particles to move downward. Again, a maximum downward speed of 200 is enforced.
                // If Down Arrow And Y Speed Is Greater Than -200 Increase Downward Speed
                if (keys[VK_DOWN] && (yspeed>-200)) yspeed-=1.0f;
Now we check to see if the right arrow is being pressed. If it is, xspeed will be increased. This will cause the particles to move to the right. A maximum speed of 200 is enforced.
                // If Right Arrow And X Speed Is Less Than 200 Increase Speed To The Right
                if (keys[VK_RIGHT] && (xspeed<200)) xspeed+=1.0f;
Finally we check to see if the left arrow is being pressed. If it is... you guessed it... xspeed is decreased, and the particles start to move left. Maximum speed of 200 enforced.
                // If Left Arrow And X Speed Is Greater Than -200 Increase Speed To The Left
                if (keys[VK_LEFT] && (xspeed>-200)) xspeed-=1.0f;
The last thing we need to do is increase the variable delay. Like I said above, delay is used to control how fast the colors change when you're using rainbow mode.
                delay++;			// Increase Rainbow Mode Color Cycling Delay Counter
Like all the previous tutorials, make sure the title at the top of the window is correct.
                if (keys[VK_F1])		// Is F1 Being Pressed?
                {
                    keys[VK_F1]=FALSE;	// If So Make Key FALSE
                    KillGLWindow();		// Kill Our Current Window
                    fullscreen=!fullscreen;	// Toggle Fullscreen / Windowed Mode
                    // Recreate Our OpenGL Window
                    if (!CreateGLWindow("NeHe's Particle Tutorial",640,480,16,fullscreen))
                    {
                        return 0;	// Quit If Window Was Not Created
                    }
                }
            }
        }
    }
    // Shutdown
    KillGLWindow();						// Kill The Window
    return (msg.wParam);					// Exit The Program
}
In this lesson, I have tried to explain in as much detail, all the steps required to create a simple but impressive particle system. This particle system can be used in games of your own to create effects such as Fire, Water, Snow, Explosions, Falling Stars, and more. The code can easily be modified to handle more parameters, and new effects (fireworks for example).

Thanks to Richard Nutman for suggesting that the particles be positioned with glVertex3f() instead of resetting the Modelview Matrix and repositioning each particle with glTranslatef(). Both methods are effective, but his method will reduce the amount of work the computer has to do before it draws each particle, causing the program to run even faster.

Thanks to Antoine Valentim for suggesting triangle strips to help speed up the program and to introduce a new command to this tutorial. The feedback on this tutorial has been great, I appreciate it!

I hope you enjoyed this tutorial. If you had any problems understanding it, or you've found a mistake in the tutorial please let me know. I want to make the best tutorials available. Your feedback is important!


Lesson 20 - Masking

Lesson 20
Welcome to Tutorial 20. The bitmap image format is supported on just about every computer, and just about every operating system. Not only is it easy to work with, it's very easy to load and use as a texture. Up until now, we've been using blending to place text and other images onto the screen without erasing what's underneath the text or image. This is effective, but the results are not always pretty.

Most the time a blended texture blends in too much or not enough. When making a game using sprites, you don't want the scene behind your character shining through the characters body. When writing text to the screen you want the text to be solid and easy to read.

That's where masking comes in handy. Masking is a two step process. First we place a black and white image of our texture on top of the scene. The white represents the transparent part of our texture. The black represents the solid part of our texture. Because of the type of blending we use, only the black will appear on the scene. Almost like a cookie cutter effect. Then we switch blending modes, and map our texture on top of the black cut out. Again, because of the blending mode we use, the only parts of our texture that will be copied to the screen are the parts that land on top of the black mask.

I'll rewrite the entire program in this tutorial aside from the sections that haven't changed. So if you're ready to learn something new, let's begin!
#include <windows.h>					// Header File For Windows
#include <math.h>					// Header File For Windows Math Library
#include <stdio.h>					// Header File For Standard Input/Output
#include <gl\gl.h>					// Header File For The OpenGL32 Library
#include <gl\glu.h>					// Header File For The GLu32 Library
#include <gl\glaux.h>					// Header File For The Glaux Library

HDC		hDC=NULL;				// Private GDI Device Context
HGLRC		hRC=NULL;				// Permanent Rendering Context
HWND		hWnd=NULL;				// Holds Our Window Handle
HINSTANCE	hInstance;				// Holds The Instance Of The Application
We'll be using 7 global variables in this program. masking is a boolean variable (TRUE / FALSE) that will keep track of whether or not masking is turned on of off. mp is used to make sure that the 'M' key isn't being held down. sp is used to make sure that the 'Spacebar' isn't being held down and the variable scene will keep track of whether or not we're drawing the first or second scene.

We set up storage space for 5 textures using the variable texture[5]. loop is our generic counter variable, we'll use it a few times in our program to set up textures, etc. Finally we have the variable roll. We'll use roll to roll the textures across the screen. Creates a neat effect! We'll also use it to spin the object in scene 2.
bool	keys[256];					// Array Used For The Keyboard Routine
bool	active=TRUE;					// Window Active Flag Set To TRUE By Default
bool	fullscreen=TRUE;				// Fullscreen Flag Set To Fullscreen Mode By Default
bool	masking=TRUE;					// Masking On/Off
bool	mp;						// M Pressed?
bool	sp;						// Space Pressed?
bool	scene;						// Which Scene To Draw

GLuint	texture[5];					// Storage For Our Five Textures
GLuint	loop;						// Generic Loop Variable

GLfloat	roll;						// Rolling Texture

LRESULT	CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);	// Declaration For WndProc
The load bitmap code hasn't changed. It's the same as it was in lesson 6, etc.

In the code below we create storage space for 5 images. We clear the space and load in all 5 bitmaps. We loop through each image and convert it into a texture for use in our program. The textures are stored in texture[0-4].
int LoadGLTextures()							// Load Bitmaps And Convert To Textures
{
    int Status=FALSE;						// Status Indicator
    AUX_RGBImageRec *TextureImage[5];				// Create Storage Space For The Texture Data
    memset(TextureImage,0,sizeof(void *)*5);			// Set The Pointer To NULL

    if ((TextureImage[0]=LoadBMP("Data/logo.bmp")) &&		// Logo Texture
        (TextureImage[1]=LoadBMP("Data/mask1.bmp")) &&		// First Mask
        (TextureImage[2]=LoadBMP("Data/image1.bmp")) &&		// First Image
        (TextureImage[3]=LoadBMP("Data/mask2.bmp")) &&		// Second Mask
        (TextureImage[4]=LoadBMP("Data/image2.bmp")))		// Second Image
    {
        Status=TRUE;						// Set The Status To TRUE
        glGenTextures(5, &texture[0]);				// Create Five Textures

        for (loop=0; loop<5; loop++)				// Loop Through All 5 Textures
        {
            glBindTexture(GL_TEXTURE_2D, texture[loop]);
            glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
            glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
            glTexImage2D(GL_TEXTURE_2D, 0, 3, TextureImage[loop]->sizeX, TextureImage[loop]->sizeY,
                0, GL_RGB, GL_UNSIGNED_BYTE, TextureImage[loop]->data);
        }
    }
    for (loop=0; loop<5; loop++)					// Loop Through All 5 Textures
    {
        if (TextureImage[loop])					// If Texture Exists
        {
            if (TextureImage[loop]->data)			// If Texture Image Exists
            {
                free(TextureImage[loop]->data);		// Free The Texture Image Memory
            }
            free(TextureImage[loop]);			// Free The Image Structure
        }
    }
    return Status;							// Return The Status
}
The ReSizeGLScene() code hasn't changed so we'll skip over it.

The Init code is fairly bare bones. We load in our textures, set the clear color, set and enable depth testing, turn on smooth shading, and enable texture mapping. Simple program so no need for a complex init :)
int InitGL(GLvoid)								// All Setup For OpenGL Goes Here
{
    if (!LoadGLTextures())							// Jump To Texture Loading Routine
    {
        return FALSE;							// If Texture Didn't Load Return FALSE
    }

    glClearColor(0.0f, 0.0f, 0.0f, 0.0f);					// Clear The Background Color To Black
    glClearDepth(1.0);							// Enables Clearing Of The Depth Buffer
    glEnable(GL_DEPTH_TEST);						// Enable Depth Testing
    glShadeModel(GL_SMOOTH);						// Enables Smooth Color Shading
    glEnable(GL_TEXTURE_2D);						// Enable 2D Texture Mapping
    return TRUE;								// Initialization Went OK
}
Now for the fun stuff. Our drawing code! We start off the same as usual. We clear the background color and the depth buffer. Then we reset the modelview matrix, and translate into the screen 2 units so that we can see our scene.
int DrawGLScene(GLvoid)								// Here's Where We Do All The Drawing
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);			// Clear The Screen And The Depth Buffer
    glLoadIdentity();							// Reset The Modelview Matrix
    glTranslatef(0.0f,0.0f,-2.0f);						// Move Into The Screen 5 Units
The first line below select the 'logo' texture. We'll map the texture to the screen using a quad. we specify our 4 texture coordinates along with our 4 vertices.

You'll notice that the texture coordinates may look weird. Instead of using 1.0 and 0.0 I'm using 3.0 and 0.0. I'll explain what this does. By using 3.0 as a texture coordinate instead of 1.0, we are telling OpenGL to draw our texture 3 times. Normally our one texture is mapped across the entire face of our quad. This time OpenGL will squish 3 of our textures onto the quad. I'm also using 3.0 for the up and down value, meaning we'll have three textures wide, and 3 textures up and down. Mapping 9 images of the selected texture to the front of our quad.

You will also notice that I've added the variable -roll to our verticle texture coordinates. This cause the texture to roll up the screen as the value of roll increases. roll tells OpenGL what part of our image to start texturing from. The image to the left is how our texture would look if roll was equal to 0.0. From 0.0 to 1.0 would be the first texture drawn up and down. From 1.0 to 2.0 would be our second texture, and from 2.0 to 3.0 would be our third texture. The image on the right shows how our texture would look if roll was equal to 0.5. Our first texure would be drawn from -0.5 to 0.5 (notice that because we started drawing halfway through the texture that the 'N' and 'e' have been cut off). The second texture would be from 0.5 to 1.5, and the third texture would be from 1.5 to 2.5. Again notice that only the 'N' and 'e' have been drawn at the bottom. We never quite made it to 3.0 (the bottom of a complete texture) so the 'H' and 'e' were not drawn. Rolling textures can be used to create great effects such as moving clouds. Words spinning around an object, etc. If you don't understand what I mean about rolling textures, let me know. If you have a better way to explain let me know. It's easy to understand how rolling textures work once you've used them, but trying to explain it in words isn't very easy.

One last explanation to hopefully clear things up. Imagine you had an endless amount of marbles up and down, left and right. Every marble was identicle (imagine each marble is a texture). The marble in the center of your infinate number of marbles is your main marble (texture). It's left side is 0.0, it's right side is 1.0, the values up and down are also 0.0 to 1.0. Now if you move left half a marble (-0.5), and you can only see 1.0 marbles wide you would only see the right half of the marble to the left of your original marble and the left half of your original marble. If you moved left another half (-0.5... a total of -1.0) you would see an entire marble (texture) but it wouldn't be your original marble, it would be the marble to the left of it. Because all the marbles look exactly the same you would think you were seeing your entire original marble (texture). {grin}. Hopefully that doesn't confuse you even more. I know how some of you hate my little stories.
    glBindTexture(GL_TEXTURE_2D, texture[0]);				// Select Our Logo Texture
    glBegin(GL_QUADS);							// Start Drawing A Textured Quad
        glTexCoord2f(0.0f, -roll+0.0f); glVertex3f(-1.1f, -1.1f,  0.0f);	// Bottom Left
        glTexCoord2f(3.0f, -roll+0.0f); glVertex3f( 1.1f, -1.1f,  0.0f);	// Bottom Right
        glTexCoord2f(3.0f, -roll+3.0f); glVertex3f( 1.1f,  1.1f,  0.0f);	// Top Right
        glTexCoord2f(0.0f, -roll+3.0f); glVertex3f(-1.1f,  1.1f,  0.0f);	// Top Left
    glEnd();								// Done Drawing The Quad
Anyways... back to reality. Now we enable blending. In order for this effect to work we also have to disable depth testing. It's very important that you do this! If you do not disable depth testing you probably wont see anything. Your entire image will vanish!
    glEnable(GL_BLEND);							// Enable Blending
    glDisable(GL_DEPTH_TEST);						// Disable Depth Testing
The first thing we do after we enable blending and disable depth testing is check to see if we're going to mask our image or blend it the old fashioned way. The line of code below checks to see if masking is TRUE. If it is we'll set up blending so that our mask gets drawn to the screen properly.
    if (masking)								// Is Masking Enabled?
    {
If masking is TRUE the line below will set up blending for our mask. A mask is just a copy of the texture we want to draw to the screen but in black and white. Any section of the mask that is white will be transparent. Any sections of the mask that is black will be SOLID.

The blend command below does the following: The Destination color (screen color) will be set to black if the section of our mask that is being copied to the screen is black. This means that sections of the screen that the black portion of our mask covers will turn black. Anything that was on the screen under the mask will be cleared to black. The section of the screen covered by the white mask will not change.
        glBlendFunc(GL_DST_COLOR,GL_ZERO);				// Blend Screen Color With Zero (Black)
    }
Now we check to see what scene to draw. If scene is TRUE we will draw the second scene. If scene is FALSE we will draw the first scene.
    if (scene)								// Are We Drawing The Second Scene?
    {
We don't want things to be too big so we translate one more unit into the screen. This reduces the size of our objects.

After we translate into the screen, we rotate from 0-360 degrees depending on the value of roll. If roll is 0.0 we will be rotating 0 degrees. If roll is 1.0 we will be rotating 360 degrees. Fairly fast rotation, but I didn't feel like creating another variable just to rotate the image in the center of the screen. :)
        glTranslatef(0.0f,0.0f,-1.0f);					// Translate Into The Screen One Unit
        glRotatef(roll*360,0.0f,0.0f,1.0f);				// Rotate On The Z Axis 360 Degrees
We already have the rolling logo on the screen and we've rotated the scene on the Z axis causing any objects we draw to be rotated counter-clockwise, now all we have to do is check to see if masking is on. If it is we'll draw our mask then our object. If masking is off we'll just draw our object.
        if (masking)							// Is Masking On?
        {
If masking is TRUE the code below will draw our mask to the screen. Our blend mode should be set up properly because we had checked for masking once already while setting up the blending. Now all we have to do is draw the mask to the screen. We select mask 2 (because this is the second scene). After we have selected the mask texture we texture map it onto a quad. The quad is 1.1 units to the left and right so that it fills the screen up a little more. We only want one texture to show up so our texture coordinates only go from 0.0 to 1.0.

after drawing our mask to the screen a solid black copy of our final texture will appear on the screen. The final result will look as if someone took a cookie cutter and cut the shape of our final texture out of the screen, leaving an empty black space.
            glBindTexture(GL_TEXTURE_2D, texture[3]);		// Select The Second Mask Texture
            glBegin(GL_QUADS);					// Start Drawing A Textured Quad
                glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.1f, -1.1f,  0.0f);	// Bottom Left
                glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.1f, -1.1f,  0.0f);	// Bottom Right
                glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.1f,  1.1f,  0.0f);	// Top Right
                glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.1f,  1.1f,  0.0f);	// Top Left
            glEnd();						// Done Drawing The Quad
        }
Now that we have drawn our mask to the screen it's time to change blending modes again. This time we're going to tell OpenGL to copy any part of our colored texture that is NOT black to the screen. Because the final texture is an exact copy of the mask but with color, the only parts of our texture that get drawn to the screen are parts that land on top of the black portion of the mask. Because the mask is black, nothing from the screen will shine through our texture. This leaves us with a very solid looking texture floating on top of the screen.

Notice that we select the second image after selecting the final blending mode. This selects our colored image (the image that our second mask is based on). Also notice that we draw this image right on top of the mask. Same texture coordinates, same vertices.

If we don't lay down a mask, our image will still be copied to the screen, but it will blend with whatever was on the screen.
        glBlendFunc(GL_ONE, GL_ONE);					// Copy Image 2 Color To The Screen
        glBindTexture(GL_TEXTURE_2D, texture[4]);			// Select The Second Image Texture
        glBegin(GL_QUADS);						// Start Drawing A Textured Quad
            glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.1f, -1.1f,  0.0f);	// Bottom Left
            glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.1f, -1.1f,  0.0f);	// Bottom Right
            glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.1f,  1.1f,  0.0f);	// Top Right
            glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.1f,  1.1f,  0.0f);	// Top Left
        glEnd();							// Done Drawing The Quad
    }
If scene was FALSE, we will draw the first scene (my favorite).
    else									// Otherwise
    {
We start off by checking to see if masking is TRUE of FALSE, just like in the code above.
        if (masking)							// Is Masking On?
        {
If masking is TRUE we draw our mask 1 to the screen (the mask for scene 1). Notice that the texture is rolling from right to left (roll is added to the horizontal texture coordinate). We want this texture to fill the entire screen that is why we never translated further into the screen.
            glBindTexture(GL_TEXTURE_2D, texture[1]);		// Select The First Mask Texture
            glBegin(GL_QUADS);					// Start Drawing A Textured Quad
                glTexCoord2f(roll+0.0f, 0.0f); glVertex3f(-1.1f, -1.1f,  0.0f);	// Bottom Left
                glTexCoord2f(roll+4.0f, 0.0f); glVertex3f( 1.1f, -1.1f,  0.0f);	// Bottom Right
                glTexCoord2f(roll+4.0f, 4.0f); glVertex3f( 1.1f,  1.1f,  0.0f);	// Top Right
                glTexCoord2f(roll+0.0f, 4.0f); glVertex3f(-1.1f,  1.1f,  0.0f);	// Top Left
            glEnd();						// Done Drawing The Quad
        }
Again we enable blending and select our texture for scene 1. We map this texture on top of it's mask. Notice we roll this texture as well, otherwise the mask and final image wouldn't line up.
        glBlendFunc(GL_ONE, GL_ONE);					// Copy Image 1 Color To The Screen
        glBindTexture(GL_TEXTURE_2D, texture[2]);			// Select The First Image Texture
        glBegin(GL_QUADS);						// Start Drawing A Textured Quad
            glTexCoord2f(roll+0.0f, 0.0f); glVertex3f(-1.1f, -1.1f,  0.0f);	// Bottom Left
            glTexCoord2f(roll+4.0f, 0.0f); glVertex3f( 1.1f, -1.1f,  0.0f);	// Bottom Right
            glTexCoord2f(roll+4.0f, 4.0f); glVertex3f( 1.1f,  1.1f,  0.0f);	// Top Right
            glTexCoord2f(roll+0.0f, 4.0f); glVertex3f(-1.1f,  1.1f,  0.0f);	// Top Left
        glEnd();							// Done Drawing The Quad
    }
Next we enable depth testing, and disable blending. This prevents strange things from happening in the rest of our program :)
    glEnable(GL_DEPTH_TEST);						// Enable Depth Testing
    glDisable(GL_BLEND);							// Disable Blending
Finally all we have left to do is increase the value of roll. If roll is greater than 1.0 we subtract 1.0. This prevents the value of roll from getting to high.
    roll+=0.002f;								// Increase Our Texture Roll Variable
    if (roll>1.0f)								// Is Roll Greater Than One
    {
        roll-=1.0f;							// Subtract 1 From Roll
    }

    return TRUE;								// Everything Went OK
}
The KillGLWindow(), CreateGLWindow() and WndProc() code hasn't changed so we'll skip over it.

The first thing you will notice different in the WinMain() code is the Window title. It's now titled "NeHe's Masking Tutorial". Change it to whatever you want :)
int WINAPI WinMain(	HINSTANCE	hInstance,				// Instance
            HINSTANCE	hPrevInstance,				// Previous Instance
            LPSTR		lpCmdLine,				// Command Line Parameters
            int		nCmdShow)				// Window Show State
{
    MSG	msg;								// Windows Message Structure
    BOOL	done=FALSE;							// Bool Variable To Exit Loop

    // Ask The User Which Screen Mode They Prefer
    if (MessageBox(NULL,"Would You Like To Run In Fullscreen Mode?", "Start FullScreen?",MB_YESNO|MB_ICONQUESTION)==IDNO)
    {
        fullscreen=FALSE;						// Windowed Mode
    }

    // Create Our OpenGL Window
    if (!CreateGLWindow("NeHe's Masking Tutorial",640,480,16,fullscreen))
    {
        return 0;							// Quit If Window Was Not Created
    }

    while(!done)								// Loop That Runs While done=FALSE
    {
        if (PeekMessage(&msg,NULL,0,0,PM_REMOVE))			// Is There A Message Waiting?
        {
            if (msg.message==WM_QUIT)				// Have We Received A Quit Message?
            {
                done=TRUE;					// If So done=TRUE
            }
            else							// If Not, Deal With Window Messages
            {
                TranslateMessage(&msg);				// Translate The Message
                DispatchMessage(&msg);				// Dispatch The Message
            }
        }
        else								// If There Are No Messages
        {
            // Draw The Scene.  Watch For ESC Key And Quit Messages From DrawGLScene()
            if ((active && !DrawGLScene()) || keys[VK_ESCAPE])	// Active?  Was There A Quit Received?
            {
                done=TRUE;					// ESC or DrawGLScene Signalled A Quit
            }
            else							// Not Time To Quit, Update Screen
            {
                SwapBuffers(hDC);				// Swap Buffers (Double Buffering)
Now for our simple key handling code. We check to see if the spacebar is being pressed. If it is, we set the sp variable to TRUE. If sp is TRUE, the code below will not run a second time until the spacebar has been released. This keeps our program from flipping back and forth from scene to scene very rapidly. After we set sp to TRUE, we toggle the scene. If it was TRUE, it becomes FALSE, if it was FALSE it becomes TRUE. In our drawing code above, if scene is FALSE the first scene is drawn. If scene is TRUE the second scene is drawn.
                if (keys[' '] && !sp)				// Is Space Being Pressed?
                {
                    sp=TRUE;				// Tell Program Spacebar Is Being Held
                    scene=!scene;				// Toggle From One Scene To The Other
                }
The code below checks to see if we have released the spacebar (if NOT ' '). If the spacebar has been released, we set sp to FALSE letting our program know that the spacebar is NOT being held down. By setting sp to FALSE the code above will check to see if the spacebar has been pressed again, and if so the cycle will start over.
                if (!keys[' '])					// Has Spacebar Been Released?
                {
                    sp=FALSE;				// Tell Program Spacebar Has Been Released
                }
The next section of code checks to see if the 'M' key is being pressed. If it is being pressed, we set mp to TRUE, telling our program not to check again until the key is released, and we toggle masking from TRUE to FALSE or FALSE to TRUE. If masking is TRUE, the drawing code will turn on masking. If it is FALSE masking will be off. If masking is off, the object will be blended to the screen using the old fashioned blending we've been using up until now.
                if (keys['M'] && !mp)				// Is M Being Pressed?
                {
                    mp=TRUE;				// Tell Program M Is Being Held
                    masking=!masking;			// Toggle Masking Mode OFF/ON
                }
The last bit of code checks to see if we've stopped pressing 'M'. If we have, mp becomes FALSE letting the program know that we are no longer holding the 'M' key down. Once the 'M' key has been released, we are able to press it once again to toggle masking on or off.
                if (!keys['M'])					// Has M Been Released?
                {
                    mp=FALSE;				// Tell Program That M Has Been Released
                }
Like all the previous tutorials, make sure the title at the top of the window is correct.
                if (keys[VK_F1])		// Is F1 Being Pressed?
                {
                    keys[VK_F1]=FALSE;	// If So Make Key FALSE
                    KillGLWindow();		// Kill Our Current Window
                    fullscreen=!fullscreen;	// Toggle Fullscreen / Windowed Mode
                    // Recreate Our OpenGL Window
                    if (!CreateGLWindow("NeHe's Masking Tutorial",640,480,16,fullscreen))
                    {
                        return 0;	// Quit If Window Was Not Created
                    }
                }
            }
        }
    }
    // Shutdown
    KillGLWindow();						// Kill The Window
    return (msg.wParam);					// Exit The Program
}
Creating a mask isn't to hard. A little time consuming. The best way to make a mask if you already have your image made is to load your image into an art program or a handy program like infranview, and reduce it to a gray scale image. After you've done that, turn the contrast way up so that gray pixels become black. You can also try turning down the brightness, etc. It's important that the white is bright white, and the black is pure black. If you have any gray pixels in your mask, that section of the image will appear transparent. The most reliable way to make sure your mask is a perfect copy of your image is to trace over the image with black. It's also very important that your image has a BLACK background and the mask has a WHITE background! If you create a mask and notice a square shape around your texture, either your white isn't bright enough (255 or FFFFFF) or your black isn't true black (0 or 000000). Below you can see an example of a mask and the image that goes over top of the mask. the image can be any color you want as long as the background is black. The mask must have a white background and a black copy of your image.

This is the mask -> [image] This is the image ->

Eric Desrosiers pointed out that you can also check the value of each pixel in your bitmap while you load it. If you want the pixel transparent you can give it an alpha value of 0. For all the other colors you can give them an alpha value of 255. This method will also work but requires some extra coding. The current tutorial is simple and requires very little extra code. I'm not blind to other techniques, but when I write a tutorial I try to make the code easy to understand and easy to use. I just wanted to point out that there are always other ways to get the job done. Thanks for the feedback Eric.

In this tutorial I have shown you a simple, but effective way to draw sections of a texture to the screen without using the alpha channel. Normal blending usually looks bad (textures are either transparent or they're not), and texturing with an alpha channel requires that your images support the alpha channel. Bitmaps are convenient to work with, but they do not support the alpha channel this program shows us how to get around the limitations of bitmap images, while demonstrating a cool way to create overlay type effects.

Thanks to Rob Santa for the idea and for example code. I had never heard of this little trick until he pointed it out. He wanted me to point out that although this trick does work, it takes two passes, which causes a performance hit. He recommends that you use textures that support the alpha channel for complex scenes.

I hope you enjoyed this tutorial. If you had any problems understanding it, or you've found a mistake in the tutorial please let me know. I want to make the best tutorials available. Your feedback is important!


Lesson 21 - Lines, Antialiasing, Timing, Ortho View And Simple Sounds

Lesson 21
Welcome to my 21st OpenGL Tutorial! Coming up with a topic for this tutorial was extremely difficult. I know alot of you are tired of learning the basics. Everyone is dying to learn about 3D objects, Multitexturing and all that other good stuff. For those people, I'm sorry, but I want to keep the learning curve gradual. Once I've gone a step ahead it's not as easy to take a step back without people losing interest. So I'd prefer to keep pushing forward at a steady pace.

In case I've lost a few of you :) I'll tell you a bit about this tutorial. Until now all of my tutorials have used polygons, quads and triangles. So I decided it would be nice to write a tutorial on lines. A few hours after starting the line tutorial, I decided to call it quits. The tutorial was coming along fine, but it was BORING! Lines are great, but there's only so much you can do to make lines exciting. I read through my email, browsed through the message board, and wrote down a few of your tutorial requests. Out of all the requests there were a few questions that came up more than others. So... I decided to write a multi-tutorial :)

In this tutorial you will learn about: Lines, Anti-Aliasing, Orthographic Projection, Timing, Basic Sound Effects, and Simple Game Logic. Hopefully there's enough in this tutorial to keep everyone happy :) I spent 2 days coding this tutorial, and It's taken almost 2 weeks to write this HTML file. I hope you enjoy my efforts!

At the end of this tutorial you will have made a simple 'amidar' type game. Your mission is to fill in the grid without being caught by the bad guys. The game has levels, stages, lives, sound, and a secret item to help you progress through the levels when things get tough. Although this game will run fine on a Pentium 166 with a Voodoo 2, a faster processor is recommended if you want smoother animation.

I used the code from lesson 1 as a starting point while writing this tutorial. We start off by adding the required header files. stdio.h is used for file operations, and we include stdarg.h so that we can display variables on the screen, such as the score and current stage.
/*
 *		This Code Was Created By Jeff Molofee 2000
 *		If You've Found This Code Useful, Please Let Me Know.
 */

#include	<windows.h>							// Header File For Windows
#include	<stdio.h>							// Standard Input / Output
#include	<stdarg.h>							// Header File For Variable Argument Routines
#include	<gl\gl.h>							// Header File For The OpenGL32 Library
#include	<gl\glu.h>							// Header File For The GLu32 Library
#include	<gl\glaux.h>							// Header File For The Glaux Library

HDC		hDC=NULL;							// Private GDI Device Context
HGLRC		hRC=NULL;							// Permanent Rendering Context
HWND		hWnd=NULL;							// Holds Our Window Handle
HINSTANCE	hInstance;							// Holds The Instance Of The Application
Now we set up our boolean variables. vline keeps track of the 121 vertical lines that make up our game grid. 11 lines across and 11 up and down. hline keeps track of the 121 horizontal lines that make up the game grid. We use ap to keep track of whether or not the 'A' key is being pressed.

filled is FALSE while the grid isn't filled and TRUE when it's been filled in. gameover is pretty obvious. If gameover is TRUE, that's it, the game is over, otherwise you're still playing. anti keeps track of antialiasing. If anti is TRUE, object antialiasing is ON. Otherwise it's off. active and fullscreen keep track of whether or not the program has been minimized or not, and whether you're running in fullscreen mode or windowed mode.
bool		keys[256];							// Array Used For The Keyboard Routine
bool		vline[11][10];							// Keeps Track Of Verticle Lines
bool		hline[10][11];							// Keeps Track Of Horizontal Lines
bool		ap;								// 'A' Key Pressed?
bool		filled;								// Done Filling In The Grid?
bool		gameover;							// Is The Game Over?
bool		anti=TRUE;							// Antialiasing?
bool		active=TRUE;							// Window Active Flag Set To TRUE By Default
bool		fullscreen=TRUE;						// Fullscreen Flag Set To Fullscreen Mode By Default
Now we set up our integer variables. loop1 and loop2 will be used to check points on our grid, see if an enemy has hit us and to give objects random locations on the grid. You'll see loop1 / loop2 in action later in the program. delay is a counter variable that I use to slow down the bad guys. If delay is greater than a certain value, the enemies are moved and delay is set back to zero.

The variable adjust is a very special variable! Even though this program has a timer, the timer only checks to see if your computer is too fast. If it is, a delay is created to slow the computer down. On my GeForce card, the program runs insanely smooth, and very very fast. After testing this program on my PIII/450 with a Voodoo 3500TV, I noticed that the program was running extremely slow. The problem is that my timing code only slows down the gameplay. It wont speed it up. So I made a new variable called adjust. adjust can be any value from 0 to 5. The objects in the game move at different speeds depending on the value of adjust. The lower the value the smoother they move, the higher the value, the faster they move (choppy at values higher than 3). This was the only real easy way to make the game playable on slow systems. One thing to note, no matter how fast the objects are moving the game speed will never run faster than I intended it to run. So setting the adjust value to 3 is safe for fast and slow systems.

The variable lives is set to 5 so that you start the game with 5 lives. level is an internal variable. The game uses it to keep track of the level of difficulty. This is not the level that you will see on the screen. The variable level2 starts off with the same value as level but can increase forever depending on your skill. If you manage to get past level 3 the level variable will stop increasing at 3. The level variable is an internal variable used for game difficulty. The stage variable keeps track of the current game stage.
int		loop1;								// Generic Loop1
int		loop2;								// Generic Loop2
int		delay;								// Enemy Delay
int		adjust=3;							// Speed Adjustment For Really Slow Video Cards
int		lives=5;							// Player Lives
int		level=1;							// Internal Game Level
int		level2=level;							// Displayed Game Level
int		stage=1;							// Game Stage
Now we create a structure to keep track of the objects in our game. We have a fine X position (fx) and a fine Y position (fy). These variables will move the player and enemies around the grid a few pixels at a time. Creating a smooth moving object.

Then we have x and y. These variables will keep track of what intersection our player is at. There are 11 points left and right and 11 points up and down. So x and y can be any value from 0 to 10. That is why we need the fine values. If we could only move one of 11 spots left and right and one of 11 spots up and down our player would jump around the screen in a quick (non smooth) motion.

The last variable spin will be used to spin the objects on their z-axis.
struct		object								// Create A Structure For Our Player
{
    int	fx, fy;								// Fine Movement Position
    int	x, y;								// Current Player Position
    float	spin;								// Spin Direction
};
Now that we have created a structure that can be used for our player, enemies and even a special item we can create new structures that take on the characteristics of the structure we just made.

The first line below creates a structure for our player. Basically we're giving our player structure fx, fy, x, y and spin values. By adding this line, we can access the player x position by checking player.x. We can change the player spin by adding a number to player.spin.

The second line is a bit different. Because we can have up to 15 enemies on the screen at a time, we need to create the above variables for each enemy. We do this by making an array of 15 enemies. the x position of the first enemy will be enemy[0].x. The second enemy will be enemy[1].x, etc.

The last line creates a structure for our special item. The special item is an hourglass that will appear on the screen from time to time. We need to keep track of the x and y values for the hourglass, but because the hourglass doesn't move, we don't need to keep track of the fine positions. Instead we will use the fine variables (fx and fy) for other things later in the program.
struct	object	player;								// Player Information
struct	object	enemy[9];							// Enemy Information
struct	object	hourglass;							// Hourglass Information
Now we create a timer structure. We create a structure so that it's easier to keep track of timer variables and so that it's easier to tell that the variable is a timer variable.

The first thing we do is create a 64 bit integer called frequency. This variable will hold the frequency of the timer. When I first wrote this program, I forgot to include this variable. I didn't realize that the frequency on one machine may not match the frequency on another. Big mistake on my part! The code ran fine on the 3 systems in my house, but when I tested it on a friends machine the game ran WAY to fast. Frequency is basically how fast the clock is updated. Good thing to keep track of :)

The resolution variable keeps track of the steps it takes before we get 1 millisecond of time.

mm_timer_start and mm_timer_elapsed hold the value that the timer started at, and the amount of time that has elapsed since the the timer was started. These two variables are only used if the computer doesn't have a performance counter. In that case we end up using the less accurate multimedia timer, which is still not to bad for a non-time critical game like this.

The variable performance_timer can be either TRUE of FALSE. If the program detects a performance counter, the variable performance_timer variable is set to TRUE, and all timing is done using the performance counter (alot more accurate than the multimedia timer). If a performance counter is not found, performance_timer is set to FALSE and the multimedia timer is used for timing.

The last 2 variables are 64 bit integer variables that hold the start time of the performance counter and the amount of time that has elapsed since the performance counter was started.

The name of this structure is "timer" as you can see at the bottom of the structure. If we want to know the timer frequency we can now check timer.frequency. Nice!
struct			 							// Create A Structure For The Timer Information
{
  __int64       frequency;							// Timer Frequency
  float         resolution;							// Timer Resolution
  unsigned long mm_timer_start;							// Multimedia Timer Start Value
  unsigned long mm_timer_elapsed;						// Multimedia Timer Elapsed Time
  bool		performance_timer;						// Using The Performance Timer?
  __int64       performance_timer_start;					// Performance Timer Start Value
  __int64       performance_timer_elapsed;					// Performance Timer Elapsed Time
} timer;									// Structure Is Named timer
The next line of code is our speed table. The objects in the game will move at a different rate depending on the value of adjust. If adjust is 0 the objects will move one pixel at a time. If the value of adjust is 5, the objects will move 20 pixels at a time. So by increasing the value of adjust the speed of the objects will increase, making the game run faster on slow computers. The higher adjust is however, the choppier the game will play.

Basically steps[ ] is just a look-up table. If adjust was 3, we would look at the number stored at location 3 in steps[ ]. Location 0 holds the value 1, location 1 holds the value 2, location 2 holds the value 4, and location 3 hold the value 5. If adjust was 3, our objects would move 5 pixels at a time. Make sense?
int		steps[6]={ 1, 2, 4, 5, 10, 20 };				// Stepping Values For Slow Video Adjustment
Next we make room for two textures. We'll load a background scene, and a bitmap font texture. Then we set up a base variable so we can keep track of our font display list just like we did in the other font tutorials. Finally we declare WndProc().
GLuint		texture[2];							// Font Texture Storage Space
GLuint		base;								// Base Display List For The Font

LRESULT	CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);				// Declaration For WndProc
Now for the fun stuff :) The next section of code initializes our timer. It will check the computer to see if a performance counter is available (very accurate counter). If we don't have a performance counter the computer will use the multimedia timer. This code should be portable from what I'm told.

We start off by clearing all the timer variables to zero. This will set all the variables in our timer structure to zero. After that, we check to see if there is NOT a performance counter. The ! means NOT. If there is, the frequency will be stored in timer.frequency.

If there was no performance counter, the code in between the { }'s is run. The first line sets the variable timer.performance_timer to FALSE. This tells our program that there is no performance counter. The second line gets our starting multimedia timer value from timeGetTime(). We set the timer.resolution to 0.001f, and the timer.frequency to 1000. Because no time has elapsed yet, we make the elapsed time equal the start time.
void TimerInit(void)								// Initialize Our Timer (Get It Ready)
{
    memset(&timer, 0, sizeof(timer));					// Clear Our Timer Structure

    // Check To See If A Performance Counter Is Available
    // If One Is Available The Timer Frequency Will Be Updated
    if (!QueryPerformanceFrequency((LARGE_INTEGER *) &timer.frequency))
    {
        // No Performace Counter Available
        timer.performance_timer	= FALSE;				// Set Performance Timer To FALSE
        timer.mm_timer_start	= timeGetTime();			// Use timeGetTime() To Get Current Time
        timer.resolution	= 1.0f/1000.0f;				// Set Our Timer Resolution To .001f
        timer.frequency		= 1000;					// Set Our Timer Frequency To 1000
        timer.mm_timer_elapsed	= timer.mm_timer_start;			// Set The Elapsed Time To The Current Time
    }
If there is a performance counter, the following code is run instead. The first line grabs the current starting value of the performance counter, and stores it in timer.performance_timer_start. Then we set timer.performance_timer to TRUE so that our program knows there is a performance counter available. After that we calculate the timer resolution by using the frequency that we got when we checked for a performance counter in the code above. We divide 1 by the frequency to get the resolution. The last thing we do is make the elapsed time the same as the starting time.

Notice instead of sharing variables for the performance and multimedia timer start and elapsed variables, I've decided to make seperate variables. Either way it will work fine.
    else
    {
        // Performance Counter Is Available, Use It Instead Of The Multimedia Timer
        // Get The Current Time And Store It In performance_timer_start
        QueryPerformanceCounter((LARGE_INTEGER *) &timer.performance_timer_start);
        timer.performance_timer		= TRUE;				// Set Performance Timer To TRUE
        // Calculate The Timer Resolution Using The Timer Frequency
        timer.resolution		= (float) (((double)1.0f)/((double)timer.frequency));
        // Set The Elapsed Time To The Current Time
        timer.performance_timer_elapsed	= timer.performance_timer_start;
    }
}
The section of code above sets up the timer. The code below reads the timer and returns the amount of time that has passed in milliseconds.

The first thing we do is set up a 64 bit variable called time. We will use this variable to grab the current counter value. The next line checks to see if we have a performance counter. If we do, timer.performance_timer will be TRUE and the code right after will run.

The first line of code inside the { }'s grabs the counter value and stores it in the variable we created called time. The second line takes the time we just grabbed (time and subtracts the start time that we got when we initialized the timer. This way our timer should start out pretty close to zero. We then multiply the results by the resolution to find out how many seconds have passed. The last thing we do is multiply the result by 1000 to figure out how many milliseconds have passed. After the calculation is done, our results are sent back to the section of code that called this procedure. The results will be in floating point format for greater accuracy.

If we are not using the peformance counter, the code after the else statement will be run. It does pretty much the same thing. We grab the current time with timeGetTime() and subtract our starting counter value. We multiply it by our resolution and then multiply the result by 1000 to convert from seconds into milliseconds.
float TimerGetTime()								// Get Time In Milliseconds
{
    __int64 time;								// time Will Hold A 64 Bit Integer

    if (timer.performance_timer)						// Are We Using The Performance Timer?
    {
        QueryPerformanceCounter((LARGE_INTEGER *) &time);		// Grab The Current Performance Time
        // Return The Current Time Minus The Start Time Multiplied By The Resolution And 1000 (To Get MS)
        return ( (float) ( time - timer.performance_timer_start) * timer.resolution)*1000.0f;
    }
    else
    {
        // Return The Current Time Minus The Start Time Multiplied By The Resolution And 1000 (To Get MS)
        return( (float) ( timeGetTime() - timer.mm_timer_start) * timer.resolution)*1000.0f;
    }
}
The following section of code resets the player to the top left corner of the screen, and gives the enemies a random starting point.

The top left of the screen is 0 on the x-axis and 0 on the y-axis. So by setting the player.x value to 0 we move the player to the far left side of the screen. By setting the player.y value to 0 we move our player to the top of the screen.

The fine positions have to be equal to the current player position, otherwise our player would move from whatever value it's at on the fine position to the top left of the screen. We don't want to player to move there, we want it to appear there, so we set the fine positions to 0 as well.
void ResetObjects(void)								// Reset Player And Enemies
{
    player.x=0;								// Reset Player X Position To Far Left Of The Screen
    player.y=0;								// Reset Player Y Position To The Top Of The Screen
    player.fx=0;								// Set Fine X Position To Match
    player.fy=0;								// Set Fine Y Position To Match
Next we give the enemies a random starting location. The number of enemies displayed on the screen will be equal to the current (internal) level value multiplied by the current stage. Remember, the maximum value that level can equal is 3 and the maximum number of stages per level is 3. So we can have a total of 9 enemies.

To make sure we give all the viewable enemies a new position, we loop through all the visible enemies (stage times level). We set each enemies x position to 5 plus a random value from 0 to 5. (the maximum value rand can be is always the number you specify minus 1). So the enemy can appear on the grid, anywhere from 5 to 10. We then give the enemy a random value on the y axis from 0 to 10.

We don't want the enemy to move from it's old position to the new random position so we make sure the fine x (fx) and y (fy) values are equal to the actual x and y values multiplied by width and height of each tile on the screen. Each tile has a width of 60 and a height of 40.
    for (loop1=0; loop1<(stage*level); loop1++)				// Loop Through All The Enemies
    {
        enemy[loop1].x=5+rand()%6;					// Select A Random X Position
        enemy[loop1].y=rand()%11;					// Select A Random Y Position
        enemy[loop1].fx=enemy[loop1].x*60;				// Set Fine X To Match
        enemy[loop1].fy=enemy[loop1].y*40;				// Set Fine Y To Match
    }
}
The AUX_RGBImageRec code hasn't changed so I'm skipping over it. In LoadGLTextures() we will load in our two textures. First the font bitmap (Font.bmp) and then the background image (Image.bmp). We'll convert both the images into textures that we can use in our game. After we have built the textures we clean up by deleting the bitmap information. Nothing really new. If you've read the other tutorials you should have no problems understanding the code.
int LoadGLTextures()								// Load Bitmaps And Convert To Textures
{
    int Status=FALSE;							// Status Indicator
    AUX_RGBImageRec *TextureImage[2];					// Create Storage Space For The Textures
    memset(TextureImage,0,sizeof(void *)*2);				// Set The Pointer To NULL

    if 	((TextureImage[0]=LoadBMP("Data/Font.bmp")) &&			// Load The Font
         (TextureImage[1]=LoadBMP("Data/Image.bmp")))			// Load Background Image
    {
        Status=TRUE;							// Set The Status To TRUE

        glGenTextures(2, &texture[0]);					// Create The Texture

        for (loop1=0; loop1<2; loop1++)					// Loop Through 2 Textures
        {
            glBindTexture(GL_TEXTURE_2D, texture[loop1]);
            glTexImage2D(GL_TEXTURE_2D, 0, 3, TextureImage[loop1]->sizeX, TextureImage[loop1]->sizeY, 0, GL_RGB, GL_UNSIGNED_BYTE, TextureImage[loop1]->data);
            glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
            glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
        }

        for (loop1=0; loop1<2; loop1++)					// Loop Through 2 Textures
        {
            if (TextureImage[loop1])				// If Texture Exists
            {
                if (TextureImage[loop1]->data)			// If Texture Image Exists
                {
                    free(TextureImage[loop1]->data);	// Free The Texture Image Memory
                }
                free(TextureImage[loop1]);			// Free The Image Structure
            }
        }
    }
    return Status;								// Return The Status
}
The code below builds our font display list. I've already done a tutorial on bitmap texture fonts. All the code does is divides the Font.bmp image into 16 x 16 cells (256 characters). Each 16x16 cell will become a character. Because I've set the y-axis up so that positive goes down instead of up, it's necessary to subtract our y-axis values from 1.0f. Otherwise the letters will all be upside down :) If you don't understand what's going on, go back and read the bitmap texture font tutorial.
GLvoid BuildFont(GLvoid)							// Build Our Font Display List
{
    base=glGenLists(256);							// Creating 256 Display Lists
    glBindTexture(GL_TEXTURE_2D, texture[0]);				// Select Our Font Texture
    for (loop1=0; loop1<256; loop1++)					// Loop Through All 256 Lists
    {
        float cx=float(loop1%16)/16.0f;					// X Position Of Current Character
        float cy=float(loop1/16)/16.0f;					// Y Position Of Current Character

        glNewList(base+loop1,GL_COMPILE);				// Start Building A List
            glBegin(GL_QUADS);					// Use A Quad For Each Character
                glTexCoord2f(cx,1.0f-cy-0.0625f);		// Texture Coord (Bottom Left)
                glVertex2d(0,16);				// Vertex Coord (Bottom Left)
                glTexCoord2f(cx+0.0625f,1.0f-cy-0.0625f);	// Texture Coord (Bottom Right)
                glVertex2i(16,16);				// Vertex Coord (Bottom Right)
                glTexCoord2f(cx+0.0625f,1.0f-cy);		// Texture Coord (Top Right)
                glVertex2i(16,0);				// Vertex Coord (Top Right)
                glTexCoord2f(cx,1.0f-cy);			// Texture Coord (Top Left)
                glVertex2i(0,0);				// Vertex Coord (Top Left)
            glEnd();						// Done Building Our Quad (Character)
            glTranslated(15,0,0);					// Move To The Right Of The Character
        glEndList();							// Done Building The Display List
    }									// Loop Until All 256 Are Built
}
It's a good idea to destroy the font display list when you're done with it, so I've added the following section of code. Again, nothing new.
GLvoid KillFont(GLvoid)								// Delete The Font From Memory
{
    glDeleteLists(base,256);						// Delete All 256 Display Lists
}
The glPrint() code hasn't changed that much. The only difference from the tutorial on bitmap font textures is that I have added the ability to print the value of variables. The only reason I've written this section of code out is so that you can see the changes. The print statement will position the text at the x and y position that you specify. You can pick one of 2 character sets, and the value of variables will be written to the screen. This allows us to display the current level and stage on the screen.

Notice that I enable texture mapping, reset the view and then translate to the proper x / y position. Also notice that if character set 0 is selected, the font is enlarged one and half times width wise, and double it's original size up and down. I did this so that I could write the title of the game in big letters. After the text has been drawn, I disable texture mapping.
GLvoid glPrint(GLint x, GLint y, int set, const char *fmt, ...)			// Where The Printing Happens
{
    char		text[256];						// Holds Our String
    va_list		ap;							// Pointer To List Of Arguments

    if (fmt == NULL)							// If There's No Text
        return;								// Do Nothing

    va_start(ap, fmt);							// Parses The String For Variables
        vsprintf(text, fmt, ap);						// And Converts Symbols To Actual Numbers
    va_end(ap);								// Results Are Stored In Text

    if (set>1)								// Did User Choose An Invalid Character Set?
    {
        set=1;								// If So, Select Set 1 (Italic)
    }
    glEnable(GL_TEXTURE_2D);						// Enable Texture Mapping
    glLoadIdentity();							// Reset The Modelview Matrix
    glTranslated(x,y,0);							// Position The Text (0,0 - Bottom Left)
    glListBase(base-32+(128*set));						// Choose The Font Set (0 or 1)

    if (set==0)								// If Set 0 Is Being Used Enlarge Font
    {
        glScalef(1.5f,2.0f,1.0f);					// Enlarge Font Width And Height
    }

    glCallLists(strlen(text),GL_UNSIGNED_BYTE, text);			// Write The Text To The Screen
    glDisable(GL_TEXTURE_2D);						// Disable Texture Mapping
}
The resize code is NEW :) Instead of using a perspective view I'm using an ortho view for this tutorial. That means that objects don't get smaller as they move away from the viewer. The z-axis is pretty much useless in this tutorial.

We start off by setting up the view port. We do this the same way we'd do it if we were setting up a perspective view. We make the viewport equal to the width of our window.

Then we select the projection matrix (thing movie projector, it information on how to display our image). and reset it.

Immediately after we reset the projection matrix, we set up our ortho view. I'll explain the command in detail:

The first parameter (0.0f) is the value that we want for the far left side of the screen. You wanted to know how to use actual pixel values, so instead of using a negative number for far left, I've set the value to 0. The second parameter is the value for the far right side of the screen. If our window is 640x480, the value stored in width will be 640. So the far right side of the screen effectively becomes 640. Therefore our screen runs from 0 to 640 on the x-axis.

The third parameter (height) would normally be our negative y-axis value (bottom of the screen). But because we want exact pixels, we wont have a negative value. Instead we will make the bottom of the screen equal the height of our window. If our window is 640x480, height will be equal to 480. So the bottom of our screen will be 480. The fourth parameter would normally be the positive value for the top of our screen. We want the top of the screen to be 0 (good old fashioned screen coordinates) so we just set the fourth parameter to 0. This gives us from 0 to 480 on the y-axis.

The last two parameters are for the z-axis. We don't really care about the z-axis so we'll set the range from -1.0f to 1.0f. Just enough that we can see anything drawn at 0.0f on the z-axis.

After we've set up the ortho view, we select the modelview matrix (object information... location, etc) and reset it.
GLvoid ReSizeGLScene(GLsizei width, GLsizei height)				// Resize And Initialize The GL Window
{
    if (height==0)								// Prevent A Divide By Zero By
    {
        height=1;							// Making Height Equal One
    }

    glViewport(0,0,width,height);						// Reset The Current Viewport

    glMatrixMode(GL_PROJECTION);						// Select The Projection Matrix
    glLoadIdentity();							// Reset The Projection Matrix

    glOrtho(0.0f,width,height,0.0f,-1.0f,1.0f);				// Create Ortho 640x480 View (0,0 At Top Left)

    glMatrixMode(GL_MODELVIEW);						// Select The Modelview Matrix
    glLoadIdentity();							// Reset The Modelview Matrix
}
The init code has a few new commands. We start off by loading our textures. If they didn't load properly, the program will quit with an error message. After we have built the textures, we build our font set. I don't bother error checking but you can if you want.

After the font has been built, we set things up. We enable smooth shading, set our clear color to black and set depth clearing to 1.0f. After that is a new line of code.

glHint() tells OpenGL how to draw something. In this case we are telling OpenGL that we want line smoothing to be the best (nicest) that OpenGL can do. This is the command that enables anti-aliasing.

The last thing we do is enable blending and select the blend mode that makes anti-aliased lines possible. Blending is required if you want the lines to blend nicely with the background image. Disable blending if you want to see how crappy things look without it.

It's important to point out that antialiasing may not appear to be working. The objects in this game are quite small so you may not notice the antialaising right off the start. Look hard. Notice how the jaggie lines on the enemies smooth out when antialiasing is on. The player and hourglass should look better as well.
int InitGL(GLvoid)								// All Setup For OpenGL Goes Here
{
    if (!LoadGLTextures())							// Jump To Texture Loading Routine
    {
        return FALSE;							// If Texture Didn't Load Return FALSE
    }

    BuildFont();								// Build The Font

    glShadeModel(GL_SMOOTH);						// Enable Smooth Shading
    glClearColor(0.0f, 0.0f, 0.0f, 0.5f);					// Black Background
    glClearDepth(1.0f);							// Depth Buffer Setup
    glHint(GL_LINE_SMOOTH_HINT, GL_NICEST);					// Set Line Antialiasing
    glEnable(GL_BLEND);							// Enable Blending
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);			// Type Of Blending To Use
    return TRUE;								// Initialization Went OK
}
Now for the drawing code. This is where the magic happens :)

We clear the screen (to black) along with the depth buffer. Then we select the font texture (texture[0]). We want the words "GRID CRAZY" to be a purple color so we set red and blue to full intensity, and we turn the green up half way. After we've selected the color, we call glPrint(). We position the words "GRID CRAZY" at 207 on the x axis (center on the screen) and 24 on the y-axis (up and down). We use our large font by selecting font set 0.

After we've drawn "GRID CRAZY" to the screen, we change the color to yellow (full red, full green). We write "Level:" and the variable level2 to the screen. Remember that level2 can be greater than 3. level2 holds the level value that the player sees on the screen. %2i means that we don't want any more than 2 digits on the screen to represent the level. The i means the number is an integer number.

After we have written the level information to the screen, we write the stage information right under it using the same color.
int DrawGLScene(GLvoid)								// Here's Where We Do All The Drawing
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);			// Clear Screen And Depth Buffer
    glBindTexture(GL_TEXTURE_2D, texture[0]);				// Select Our Font Texture
    glColor3f(1.0f,0.5f,1.0f);						// Set Color To Purple
    glPrint(207,24,0,"GRID CRAZY");						// Write GRID CRAZY On The Screen
    glColor3f(1.0f,1.0f,0.0f);						// Set Color To Yellow
    glPrint(20,20,1,"Level:%2i",level2);					// Write Actual Level Stats
    glPrint(20,40,1,"Stage:%2i",stage);					// Write Stage Stats
Now we check to see if the game is over. If the game is over, the variable gameover will be TRUE. If the game is over, we use glColor3ub(r,g,b) to select a random color. Notice we are using 3ub instead of 3f. By using 3ub we can use integer values from 0 to 255 to set our colors. Plus it's easier to get a random value from 0 to 255 than it is to get a random value from 0.0f to 1.0f.

Once a random color has been selected, we write the words "GAME OVER" to the right of the game title. Right under "GAME OVER" we write "PRESS SPACE". This gives the player a visual message letting them know that they have died and to press the spacebar to restart the game.
    if (gameover)								// Is The Game Over?
    {
        glColor3ub(rand()%255,rand()%255,rand()%255);			// Pick A Random Color
        glPrint(472,20,1,"GAME OVER");					// Write GAME OVER To The Screen
        glPrint(456,40,1,"PRESS SPACE");				// Write PRESS SPACE To The Screen
    }
If the player still has lives left, we draw animated images of the players character to the right of the game title. To do this we create a loop that goes from 0 to the current number of lives the player has left minus one. I subtract one, because the current life is the image you control.

Inside the loop, we reset the view. After the view has been reset, we translate to the 490 pixels to the right plus the value of loop1 times 40.0f. This draws each of the animated player lives 40 pixels apart from eachother. The first animated image will be drawn at 490+(0*40) (= 490), the second animated image will be drawn at 490+(1*40) (= 530), etc.

After we have moved to the spot we want to draw the animated image, we rotate counterclockwise depending on the value stored in player.spin. This causes the animated life images to spin the opposite way that your active player is spinning.

We then select green as our color, and start drawing the image. Drawing lines is alot like drawing a quad or a polygon. You start off with glBegin(GL_LINES), telling OpenGL we want to draw a line. Lines have 2 vertices. We use glVertex2d to set our first point. glVertex2d doesn't require a z value, which is nice considering we don't care about the z value. The first point is drawn 5 pixels to the left of the current x location and 5 pixels up from the current y location. Giving us a top left point. The second point of our first line is drawn 5 pixels to the right of our current x location, and 5 pixels down, giving us a bottom right point. This draws a line from the top left to the bottom right. Our second line is drawn from the top right to the bottom left. This draws a green X on the screen.

After we have drawn the green X, we rotate counterclockwise (on the z axis) even more, but this time at half the speed. We then select a darker shade of green (0.75f) and draw another x, but we use 7 instead of 5 this time. This draws a bigger / darker x on top of the first green X. Because the darker X spins slower though, it will look as if the bright X has a spinning set of feelers (grin) on top of it.
    for (loop1=0; loop1<lives-1; loop1++)					// Loop Through Lives Minus Current Life
    {
        glLoadIdentity();						// Reset The View
        glTranslatef(490+(loop1*40.0f),40.0f,0.0f);			// Move To The Right Of Our Title Text
        glRotatef(-player.spin,0.0f,0.0f,1.0f);				// Rotate Counter Clockwise
        glColor3f(0.0f,1.0f,0.0f);					// Set Player Color To Light Green
        glBegin(GL_LINES);						// Start Drawing Our Player Using Lines
            glVertex2d(-5,-5);					// Top Left Of Player
            glVertex2d( 5, 5);					// Bottom Right Of Player
            glVertex2d( 5,-5);					// Top Right Of Player
            glVertex2d(-5, 5);					// Bottom Left Of Player
        glEnd();							// Done Drawing The Player
        glRotatef(-player.spin*0.5f,0.0f,0.0f,1.0f);			// Rotate Counter Clockwise
        glColor3f(0.0f,0.75f,0.0f);					// Set Player Color To Dark Green
        glBegin(GL_LINES);						// Start Drawing Our Player Using Lines
            glVertex2d(-7, 0);					// Left Center Of Player
            glVertex2d( 7, 0);					// Right Center Of Player
            glVertex2d( 0,-7);					// Top Center Of Player
            glVertex2d( 0, 7);					// Bottom Center Of Player
        glEnd();							// Done Drawing The Player
    }
Now we're going to draw the grid. We set the variable filled to TRUE. This tells our program that the grid has been completely filled in (you'll see why we do this in a second).

Right after that we set the line width to 2.0f. This makes the lines thicker, making the grid look more defined.

Then we disable anti-aliasing. The reason we disable anti-aliasing is because although it's a great feature, it eats CPU's for breakfast. Unless you have a killer graphics card, you'll notice a huge slow down if you leave anti-aliasing on. Go ahead and try if you want :)

The view is reset, and we start two loops. loop1 will travel from left to right. loop2 will travel from top to bottom.

We set the line color to blue, then we check to see if the horizontal line that we are about to draw has been traced over. If it has we set the color to white. The value of hline[loop1][loop2] will be TRUE if the line has been traced over, and FALSE if it hasn't.

After we have set the color to blue or white, we draw the line. The first thing to do is make sure we haven't gone to far to the right. We don't want to draw any lines or check to see if the line has been filled in when loop1 is greater than 9.

Once we are sure loop1 is in the valid range we check to see if the horizontal line hasn't been filled in. If it hasn't, filled is set to FALSE, letting our OpenGL program know that there is at least one line that hasn't been filled in.

The line is then drawn. We draw our first horizontal (left to right) line starting at 20+(0*60) (= 20). This line is drawn all the way to 80+(0*60) (= 80). Notice the line is drawn to the right. That is why we don't want to draw 11 (0-10) lines. because the last line would start at the far right of the screen and end 80 pixels off the screen.
    filled=TRUE;								// Set Filled To True Before Testing
    glLineWidth(2.0f);							// Set Line Width For Cells To 2.0f
    glDisable(GL_LINE_SMOOTH);						// Disable Antialiasing
    glLoadIdentity();							// Reset The Current Modelview Matrix
    for (loop1=0; loop1<11; loop1++)					// Loop From Left To Right
    {
        for (loop2=0; loop2<11; loop2++)				// Loop From Top To Bottom
        {
            glColor3f(0.0f,0.5f,1.0f);				// Set Line Color To Blue
            if (hline[loop1][loop2])				// Has The Horizontal Line Been Traced
            {
                glColor3f(1.0f,1.0f,1.0f);			// If So, Set Line Color To White
            }
            if (loop1<10)						// Dont Draw To Far Right
            {
                if (!hline[loop1][loop2])			// If A Horizontal Line Isn't Filled
                {
                    filled=FALSE;				// filled Becomes False
                }
                glBegin(GL_LINES);				// Start Drawing Horizontal Cell Borders
                    glVertex2d(20+(loop1*60),70+(loop2*40));	// Left Side Of Horizontal Line
                    glVertex2d(80+(loop1*60),70+(loop2*40));	// Right Side Of Horizontal Line
                glEnd();					// Done Drawing Horizontal Cell Borders
            }
The code below does the same thing, but it checks to make sure the line isn't being drawn too far down the screen instead of too far right. This code is responsible for drawing vertical lines.
            glColor3f(0.0f,0.5f,1.0f);				// Set Line Color To Blue
            if (vline[loop1][loop2])				// Has The Horizontal Line Been Traced
            {
                glColor3f(1.0f,1.0f,1.0f);			// If So, Set Line Color To White
            }
            if (loop2<10)						// Dont Draw To Far Down
            {
                if (!vline[loop1][loop2])			// If A Verticle Line Isn't Filled
                {
                    filled=FALSE;				// filled Becomes False
                }
                glBegin(GL_LINES);				// Start Drawing Verticle Cell Borders
                    glVertex2d(20+(loop1*60),70+(loop2*40));	// Left Side Of Horizontal Line
                    glVertex2d(20+(loop1*60),110+(loop2*40));	// Right Side Of Horizontal Line
                glEnd();					// Done Drawing Verticle Cell Borders
            }
Now we check to see if 4 sides of a box are traced. Each box on the screen is 1/10th of a full screen picture. Because each box is piece of a larger texture, the first thing we need to do is enable texture mapping. We don't want the texture to be tinted red, green or blue so we set the color to bright white. After the color is set to white we select our grid texture (texture[1]).

The next thing we do is check to see if we are checking a box that exists on the screen. Remember that our loop draws the 11 lines right and left and 11 lines up and down. But we dont have 11 boxes. We have 10 boxes. So we have to make sure we don't check the 11th position. We do this by making sure both loop1 and loop2 is less than 10. That's 10 boxes from 0 - 9.

After we have made sure that we are in bounds we can start checking the borders. hline[loop1][loop2] is the top of a box. hline[loop1][loop2+1] is the bottom of a box. vline[loop1][loop2] is the left side of a box and vline[loop1+1][loop2] is the right side of a box. Hopefully I can clear things up with a diagram:

All horizontal lines are assumed to run from loop1 to loop1+1. As you can see, the first horizontal line is runs along loop2. The second horizontal line runs along loop2+1. Vertical lines are assumed to run from loop2 to loop2+1. The first vertical line runs along loop1 and the second vertical line runs along loop1+1

When loop1 is increased, the right side of our old box becomes the left side of the new box. When loop2 is increased, the bottom of the old box becomes the top of the new box.

If all 4 borders are TRUE (meaning we've passed over them all) we can texture map the box. We do this the same way we broke the font texture into seperate letters. We divide both loop1 and loop2 by 10 because we want to map the texture across 10 boxes from left to right and 10 boxes up and down. Texture coordinates run from 0.0f to 1.0f and 1/10th of 1.0f is 0.1f.

So to get the top right side of our box we divide the loop values by 10 and add 0.1f to the x texture coordinate. To get the top left side of the box we divide our loop values by 10. To get the bottom left side of the box we divide our loop values by 10 and add 0.1f to the y texture coordinate. Finally to get the bottom right texture coordinate we divide the loop values by 10 and add 0.1f to both the x and y texture coordinates.

Quick examples:

loop1=0 and loop2=0

  • Right X Texture Coordinate = loop1/10+0.1f = 0/10+0.1f = 0+0.1f = 0.1f
  • Left X Texture Coordinate = loop1/10 = 0/10 = 0.0f
  • Top Y Texture Coordinate = loop2/10 = 0/10 = 0.0f;
  • Bottom Y Texture Coordinate = loop2/10+0.1f = 0/10+0.1f = 0+0.1f = 0.1f;

    loop1=1 and loop2=1

  • Right X Texture Coordinate = loop1/10+0.1f = 1/10+0.1f = 0.1f+0.1f = 0.2f
  • Left X Texture Coordinate = loop1/10 = 1/10 = 0.1f
  • Top Y Texture Coordinate = loop2/10 = 1/10 = 0.1f;
  • Bottom Y Texture Coordinate = loop2/10+0.1f = 1/10+0.1f = 0.1f+0.1f = 0.2f;

    Hopefully that all makes sense. If loop1 and loop2 were equal to 9 we would end up with the values 0.9f and 1.0f. So as you can see our texture coordinates mapped across the 10 boxes run from 0.0f at the lowest and 1.0f at the highest. Mapping the entire texture to the screen. After we've mapped a section of the texture to the screen, we disable texture mapping. Once we've drawn all the lines and filled in all the boxes, we set the line width to 1.0f.
    • 			glEnable(GL_TEXTURE_2D);				// Enable Texture Mapping
            glColor3f(1.0f,1.0f,1.0f);				// Bright White Color
            glBindTexture(GL_TEXTURE_2D, texture[1]);		// Select The Tile Image
            if ((loop1<10) && (loop2<10))				// If In Bounds, Fill In Traced Boxes
            {
                // Are All Sides Of The Box Traced?
                if (hline[loop1][loop2] && hline[loop1][loop2+1] && vline[loop1][loop2] && vline[loop1+1][loop2])
                {
                    glBegin(GL_QUADS);			// Draw A Textured Quad
                        glTexCoord2f(float(loop1/10.0f)+0.1f,1.0f-(float(loop2/10.0f)));
                        glVertex2d(20+(loop1*60)+59,(70+loop2*40+1));	// Top Right
                        glTexCoord2f(float(loop1/10.0f),1.0f-(float(loop2/10.0f)));
                        glVertex2d(20+(loop1*60)+1,(70+loop2*40+1));	// Top Left
                        glTexCoord2f(float(loop1/10.0f),1.0f-(float(loop2/10.0f)+0.1f));
                        glVertex2d(20+(loop1*60)+1,(70+loop2*40)+39);	// Bottom Left
                        glTexCoord2f(float(loop1/10.0f)+0.1f,1.0f-(float(loop2/10.0f)+0.1f));
                        glVertex2d(20+(loop1*60)+59,(70+loop2*40)+39);	// Bottom Right
                    glEnd();				// Done Texturing The Box
                }
            }
            glDisable(GL_TEXTURE_2D);				// Disable Texture Mapping
        }
    }
    glLineWidth(1.0f);							// Set The Line Width To 1.0f
    The code below checks to see if anti is TRUE. If it is, we enable line smoothing (anti-aliasing).
        if (anti)								// Is Anti TRUE?
    {
        glEnable(GL_LINE_SMOOTH);					// If So, Enable Antialiasing
    }
    To make the game a little easier I've added a special item. The item is an hourglass. When you touch the hourglass, the enemies are frozen for a specific amount of time. The following section of code is resposible for drawing the hourglass.

    For the hourglass we use x and y to position the timer, but unlike our player and enemies we don't use fx and fy for fine positioning. Instead we'll use fx to keep track of whether or not the timer is being displayed. fx will equal 0 if the timer is not visible. 1 if it is visible, and 2 if the player has touched the timer. fy will be used as a counter to keep track of how long the timer should be visible or invisible.

    So we start off by checking to see if the timer is visible. If not, we skip over the code without drawing the timer. If the timer is visible, we reset the modelview matrix, and position the timer. Because our first grid point from left to right starts at 20, we will add hourglass.x times 60 to 20. We multiply hourglass.x by 60 because the points on our grid from left to right are spaced 60 pixels apart. We then position the hourglass on the y axis. We add hourglass.y times 40 to 70.0f because we want to start drawing 70 pixels down from the top of the screen. Each point on our grid from top to bottom is spaced 40 pixels apart.

    After we have positioned the hourglass, we can rotate it on the z-axis. hourglass.spin is used to keep track of the rotation, the same way player.spin keeps track of the player rotation. Before we start to draw the hourglass we select a random color.
        if (hourglass.fx==1)							// If fx=1 Draw The Hourglass
    {
        glLoadIdentity();						// Reset The Modelview Matrix
        glTranslatef(20.0f+(hourglass.x*60),70.0f+(hourglass.y*40),0.0f);	// Move To The Fine Hourglass Position
        glRotatef(hourglass.spin,0.0f,0.0f,1.0f);			// Rotate Clockwise
        glColor3ub(rand()%255,rand()%255,rand()%255);			// Set Hourglass Color To Random Color
    glBegin(GL_LINES) tells OpenGL we want to draw using lines. We start off by moving left and up 5 pixels from our current location. This gives us the top left point of our hourglass. OpenGL will start drawing the line from this location. The end of the line will be 5 pixels right and down from our original location. This gives us a line running from the top left to the bottom right. Immediately after that we draw a second line running from the top right to the bottom left. This gives us an 'X'. We finish off by connecting the bottom two points together, and then the top two points to create an hourglass type object :)
            glBegin(GL_LINES);						// Start Drawing Our Hourglass Using Lines
            glVertex2d(-5,-5);					// Top Left Of Hourglass
            glVertex2d( 5, 5);					// Bottom Right Of Hourglass
            glVertex2d( 5,-5);					// Top Right Of Hourglass
            glVertex2d(-5, 5);					// Bottom Left Of Hourglass
            glVertex2d(-5, 5);					// Bottom Left Of Hourglass
            glVertex2d( 5, 5);					// Bottom Right Of Hourglass
            glVertex2d(-5,-5);					// Top Left Of Hourglass
            glVertex2d( 5,-5);					// Top Right Of Hourglass
        glEnd();							// Done Drawing The Hourglass
    }
    Now we draw our player. We reset the modelview matrix, and position the player on the screen. Notice we position the player using fx and fy. We want the player to move smoothly so we use fine positioning. After positioning the player, we rotate the player on it's z-axis using player.spin. We set the color to light green and begin drawing. Just like the code we used to draw the hourglass, we draw an 'X'. Starting at the top left to the bottom right, then from the top right to the bottom left.
        glLoadIdentity();							// Reset The Modelview Matrix
    glTranslatef(player.fx+20.0f,player.fy+70.0f,0.0f);			// Move To The Fine Player Position
    glRotatef(player.spin,0.0f,0.0f,1.0f);					// Rotate Clockwise
    glColor3f(0.0f,1.0f,0.0f);						// Set Player Color To Light Green
    glBegin(GL_LINES);							// Start Drawing Our Player Using Lines
        glVertex2d(-5,-5);						// Top Left Of Player
        glVertex2d( 5, 5);						// Bottom Right Of Player
        glVertex2d( 5,-5);						// Top Right Of Player
        glVertex2d(-5, 5);						// Bottom Left Of Player
    glEnd();								// Done Drawing The Player
    Drawing low detail objects with lines can be a little frustrating. I didn't want the player to look boring so I added the next section of code to create a larger and quicker spinning blade on top of the player that we drew above. We rotate on the z-axis by player.spin times 0.5f. Because we are rotating again, it will appear as if this piece of the player is moving a little quicker than the first piece of the player.

    After doing the new rotation, we set the color to a darker shade of green. So that it actually looks like the player is made up of different colors / pieces. We then draw a large '+' on top of the first piece of the player. It's larger because we're using -7 and +7 instead of -5 and +5. Also notice that instead of drawing from one corner to another, I'm drawing this piece of the player from left to right and top to bottom.
        glRotatef(player.spin*0.5f,0.0f,0.0f,1.0f);				// Rotate Clockwise
    glColor3f(0.0f,0.75f,0.0f);						// Set Player Color To Dark Green
    glBegin(GL_LINES);							// Start Drawing Our Player Using Lines
        glVertex2d(-7, 0);						// Left Center Of Player
        glVertex2d( 7, 0);						// Right Center Of Player
        glVertex2d( 0,-7);						// Top Center Of Player
        glVertex2d( 0, 7);						// Bottom Center Of Player
    glEnd();								// Done Drawing The Player
    All we have to do now is draw the enemies, and we're done drawing :) We start off by creating a loop that will loop through all the enemies visible on the current level. We calculate how many enemies to draw by multiplying our current game stage by the games internal level. Remember that each level has 3 stages, and the maximum value of the internal level is 3. So we can have a maximum of 9 enemies.

    Inside the loop we reset the modelview matrix, and position the current enemy (enemy[loop1]). We position the enemy using it's fine x and y values (fx and fy). After positioning the current enemy we set the color to pink and start drawing.

    The first line will run from 0, -7 (7 pixels up from the starting location) to -7,0 (7 pixels left of the starting location). The second line runs from -7,0 to 0,7 (7 pixels down from the starting location). The third line runs from 0,7 to 7,0 (7 pixels to the right of our starting location), and the last line runs from 7,0 back to the beginning of the first line (7 pixels up from the starting location). This creates a non spinning pink diamond on the screen.
        for (loop1=0; loop1<(stage*level); loop1++)				// Loop To Draw Enemies
    {
        glLoadIdentity();						// Reset The Modelview Matrix
        glTranslatef(enemy[loop1].fx+20.0f,enemy[loop1].fy+70.0f,0.0f);
        glColor3f(1.0f,0.5f,0.5f);					// Make Enemy Body Pink
        glBegin(GL_LINES);						// Start Drawing Enemy
            glVertex2d( 0,-7);					// Top Point Of Body
            glVertex2d(-7, 0);					// Left Point Of Body
            glVertex2d(-7, 0);					// Left Point Of Body
            glVertex2d( 0, 7);					// Bottom Point Of Body
            glVertex2d( 0, 7);					// Bottom Point Of Body
            glVertex2d( 7, 0);					// Right Point Of Body
            glVertex2d( 7, 0);					// Right Point Of Body
            glVertex2d( 0,-7);					// Top Point Of Body
        glEnd();							// Done Drawing Enemy Body
    We don't want the enemy to look boring either so we'll add a dark red spinning blade ('X') on top of the diamond that we just drew. We rotate on the z-axis by enemy[loop1].spin, and then draw the 'X'. We start at the top left and draw a line to the bottom right. Then we draw a second line from the top right to the bottom left. The two lines cross eachother creating an 'X' (or blade ... grin).
            glRotatef(enemy[loop1].spin,0.0f,0.0f,1.0f);			// Rotate The Enemy Blade
        glColor3f(1.0f,0.0f,0.0f);					// Make Enemy Blade Red
        glBegin(GL_LINES);						// Start Drawing Enemy Blade
            glVertex2d(-7,-7);					// Top Left Of Enemy
            glVertex2d( 7, 7);					// Bottom Right Of Enemy
            glVertex2d(-7, 7);					// Bottom Left Of Enemy
            glVertex2d( 7,-7);					// Top Right Of Enemy
        glEnd();							// Done Drawing Enemy Blade
    }
    return TRUE;								// Everything Went OK
}
    I added the KillFont() command to the end of KillGLWindow(). This makes sure the font display list is destroyed when the window is destroyed.
    GLvoid KillGLWindow(GLvoid)							// Properly Kill The Window
{
    if (fullscreen)								// Are We In Fullscreen Mode?
    {
        ChangeDisplaySettings(NULL,0);					// If So Switch Back To The Desktop
        ShowCursor(TRUE);						// Show Mouse Pointer
    }

    if (hRC)								// Do We Have A Rendering Context?
    {
        if (!wglMakeCurrent(NULL,NULL))					// Are We Able To Release The DC And RC Contexts?
        {
            MessageBox(NULL,"Release Of DC And RC Failed.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        }

        if (!wglDeleteContext(hRC))					// Are We Able To Delete The RC?
        {
            MessageBox(NULL,"Release Rendering Context Failed.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        }
        hRC=NULL;							// Set RC To NULL
    }

    if (hDC && !ReleaseDC(hWnd,hDC))					// Are We Able To Release The DC
    {
        MessageBox(NULL,"Release Device Context Failed.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        hDC=NULL;							// Set DC To NULL
    }

    if (hWnd && !DestroyWindow(hWnd))					// Are We Able To Destroy The Window?
    {
        MessageBox(NULL,"Could Not Release hWnd.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        hWnd=NULL;							// Set hWnd To NULL
    }

    if (!UnregisterClass("OpenGL",hInstance))				// Are We Able To Unregister Class
    {
        MessageBox(NULL,"Could Not Unregister Class.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        hInstance=NULL;							// Set hInstance To NULL
    }

    KillFont();								// Kill The Font We Built
}
    The CreateGLWindow() and WndProc() code hasn't changed so search until you find the following section of code.
    int WINAPI WinMain(	HINSTANCE	hInstance,				// Instance
            HINSTANCE	hPrevInstance,				// Previous Instance
            LPSTR		lpCmdLine,				// Command Line Parameters
            int		nCmdShow)				// Window Show State
{
    MSG	msg;								// Windows Message Structure
    BOOL	done=FALSE;							// Bool Variable To Exit Loop

    // Ask The User Which Screen Mode They Prefer
    if (MessageBox(NULL,"Would You Like To Run In Fullscreen Mode?", "Start FullScreen?",MB_YESNO|MB_ICONQUESTION)==IDNO)
    {
        fullscreen=FALSE;						// Windowed Mode
    }
    This section of code hasn't changed that much. I changed the window title to read "NeHe's Line Tutorial", and I added the ResetObjects() command. This sets the player to the top left point of the grid, and gives the enemies random starting locations. The enemies will always start off at least 5 tiles away from you.
        if (!CreateGLWindow("NeHe's Line Tutorial",640,480,16,fullscreen))	// Create Our OpenGL Window
    {
        return 0;							// Quit If Window Was Not Created
    }

    ResetObjects();								// Set Player / Enemy Starting Positions

    while(!done)								// Loop That Runs While done=FALSE
    {
        if (PeekMessage(&msg,NULL,0,0,PM_REMOVE))			// Is There A Message Waiting?
        {
            if (msg.message==WM_QUIT)				// Have We Received A Quit Message?
            {
                done=TRUE;					// If So done=TRUE
            }
            else							// If Not, Deal With Window Messages
            {
                TranslateMessage(&msg);				// Translate The Message
                DispatchMessage(&msg);				// Dispatch The Message
            }
        }
        else								// If There Are No Messages
        {
    Now to make the timing code work. Notice before we draw our scene we grab the time, and store it in a floating point variable called start. We then draw the scene and swap buffers.

    Immediately after we swap the buffers we create a delay. We do this by checking to see if the current value of the timer (TimerGetTime( )) is less than our starting value plus the game stepping speed times 2. If the current timer value is less than the value we want, we endlessly loop until the current timer value is equal to or greater than the value we want. This slows down REALLY fast systems.

    Because we use the stepping speed (set by the value of adjust) the program will always run the same speed. For example, if our stepping speed was 1 we would wait until the timer was greater than or equal to 2 (1*2). But if we increased the stepping speed to 2 (causing the player to move twice as many pixels at a time), the delay is increased to 4 (2*2). So even though we are moving twice as fast, the delay is twice as long, so the game still runs the same speed :)

    One thing alot of people like to do is take the current time, and subtract the old time to find out how much time has passed. Then they move objects a certain distance based on the amount of time that has passed. Unfortunately I can't do that in this program because the fine movement has to be exact so that the player can line up with the lines on the grid. If the current fine x position was 59 and the computer decided the player needed to move two pixels, the player would never line up with the vertical line at position 60 on the grid.
                float start=TimerGetTime();				// Grab Timer Value Before We Draw

            // Draw The Scene.  Watch For ESC Key And Quit Messages From DrawGLScene()
            if ((active && !DrawGLScene()) || keys[VK_ESCAPE])	// Active?  Was There A Quit Received?
            {
                done=TRUE;					// ESC or DrawGLScene Signalled A Quit
            }
            else							// Not Time To Quit, Update Screen
            {
                SwapBuffers(hDC);				// Swap Buffers (Double Buffering)
            }

            while(TimerGetTime()<start+float(steps[adjust]*2.0f)) {}// Waste Cycles On Fast Systems
    The following code hasn't really changed. I changed the title of the window to read "NeHe's Line Tutorial".
                if (keys[VK_F1])					// Is F1 Being Pressed?
            {
                keys[VK_F1]=FALSE;				// If So Make Key FALSE
                KillGLWindow();					// Kill Our Current Window
                fullscreen=!fullscreen;				// Toggle Fullscreen / Windowed Mode
                // Recreate Our OpenGL Window
                if (!CreateGLWindow("NeHe's Line Tutorial",640,480,16,fullscreen))
                {
                    return 0;				// Quit If Window Was Not Created
                }
            }
    This section of code checks to see if the A key is being pressed and not held. If 'A' is being pressed, ap becomes TRUE (telling our program that A is being held down), and anti is toggled from TRUE to FALSE or FALSE to TRUE. Remember that anti is checked in the drawing code to see if antialiasing is turned on or off.

    If the 'A' key has been released (is FALSE) then ap is set to FALSE telling the program that the key is no longer being held down.
                if (keys['A'] && !ap)					// If 'A' Key Is Pressed And Not Held
            {
                ap=TRUE;					// ap Becomes TRUE
                anti=!anti;					// Toggle Antialiasing
            }
            if (!keys['A'])						// If 'A' Key Has Been Released
            {
                ap=FALSE;					// ap Becomes FALSE
            }
    Now to move the enemies. I wanted to keep this section of code really simple. There is very little logic. Basically, the enemies check to see where you are and they move in that direction. Because I'm checking the actual x and y position of the players and no the fine values, the players seem to have a little more intelligence. They may see that you are way at the top of the screen. But by the time they're fine value actually gets to the top of the screen, you could already be in a different location. This causes them to sometimes move past you, before they realize you are no longer where they thought you were. May sound like they're really dumb, but because they sometimes move past you, you might find yourself being boxed in from all directions.

    We start off by checking to make sure the game isn't over, and that the window (if in windowed mode) is still active. By checking active the enemies wont move if the screen is minimized. This gives you a convenient pause feature when you need to take a break :)

    After we've made sure the enemies should be moving, we create a loop. The loop will loop through all the visible enemies. Again we calculate how many enemies should be on the screen by multiplying the current stage by the current internal level.
                if (!gameover && active)				// If Game Isn't Over And Programs Active Move Objects
            {
                for (loop1=0; loop1<(stage*level); loop1++)	// Loop Through The Different Stages
                {
    Now we move the current enemy (enemy[loop1]). We start off by checking to see if the enemy's x position is less than the players x position and we make sure that the enemy's fine y position lines up with a horizontal line. We can't move the enemy left and right if it's not on a horizontal line. If we did, the enemy would cut right through the middle of the boxes, making the game even more difficult :)

    If the enemy x position is less than the player x position, and the enemy's fine y position is lined up with a horizontal line, we move the enemy x position one block closer to the current player position.

    We also do this to move the enemy left, down and up. When moving up and down, we need to make sure the enemy's fine x position lines up with a vertical line. We don't want the enemy cutting through the top or bottom of a box.

    Note: changing the enemies x and y positions doesn't move the enemy on the screen. Remember that when we drew the enemies we used the fine positions to place the enemies on the screen. Changing the x and y positions just tells our program where we WANT the enemies to move.
                        if ((enemy[loop1].x<player.x) && (enemy[loop1].fy==enemy[loop1].y*40))
                    {
                        enemy[loop1].x++;		// Move The Enemy Right
                    }

                    if ((enemy[loop1].x>player.x) && (enemy[loop1].fy==enemy[loop1].y*40))
                    {
                        enemy[loop1].x--;		// Move The Enemy Left
                    }

                    if ((enemy[loop1].y<player.y) && (enemy[loop1].fx==enemy[loop1].x*60))
                    {
                        enemy[loop1].y++;		// Move The Enemy Down
                    }

                    if ((enemy[loop1].y>player.y) && (enemy[loop1].fx==enemy[loop1].x*60))
                    {
                        enemy[loop1].y--;		// Move The Enemy Up
                    }
    This code does the actual moving. We check to see if the variable delay is greater than 3 minus the current internal level. That way if our current level is 1 the program will loop through 2 (3-1) times before the enemies actually move. On level 3 (the highest value that level can be) the enemies will move the same speed as the player (no delays). We also make sure that hourglass.fx isn't the same as 2. Remember, if hourglass.fx is equal to 2, that means the player has touched the hourglass. Meaning the enemies shouldn't be moving.

    If delay is greater than 3-level and the player hasn't touched the hourglass, we move the enemies by adjusting the enemy fine positions (fx and fy). The first thing we do is set delay back to 0 so that we can start the delay counter again. Then we set up a loop that loops through all the visible enemies (stage times level).
                        if (delay>(3-level) && (hourglass.fx!=2))		// If Our Delay Is Done And Player Doesn't Have Hourglass
                    {
                        delay=0;					// Reset The Delay Counter Back To Zero
                        for (loop2=0; loop2<(stage*level); loop2++)	// Loop Through All The Enemies
                        {
    To move the enemies we check to see if the current enemy (enemy[loop2]) needs to move in a specific direction to move towards the enemy x and y position we want. In the first line below we check to see if the enemy fine position on the x-axis is less than the desired x position times 60. (remember each grid crossing is 60 pixels apart from left to right). If the fine x position is less than the enemy x position times 60 we move the enemy to the right by steps[adjust] (the speed our game is set to play at based on the value of adjust). We also rotate the enemy clockwise to make it look like it's rolling to the right. We do this by increasing enemy[loop2].spin by steps[adjust] (the current game speed based on adjust).

    We then check to see if the enemy fx value is greater than the enemy x position times 60 and if so, we move the enemy left and spin the enemy left.

    We do the same when moving the enemy up and down. If the enemy y position is less than the enemy fy position times 40 (40 pixels between grid points up and down) we increase the enemy fy position, and rotate the enemy to make it look like it's rolling downwards. Lastly if the enemy y position is greater than the enemy fy position times 40 we decrease the value of fy to move the enemy upward. Again, the enemy spins to make it look like it's rolling upward.
                                if (enemy[loop2].fx<enemy[loop2].x*60)	// Is Fine Position On X Axis Lower Than Intended Position?
                            {
                                enemy[loop2].fx+=steps[adjust];	// If So, Increase Fine Position On X Axis
                                enemy[loop2].spin+=steps[adjust];	// Spin Enemy Clockwise
                            }
                            if (enemy[loop2].fx>enemy[loop2].x*60)	// Is Fine Position On X Axis Higher Than Intended Position?
                            {
                                enemy[loop2].fx-=steps[adjust];	// If So, Decrease Fine Position On X Axis
                                enemy[loop2].spin-=steps[adjust];	// Spin Enemy Counter Clockwise
                            }
                            if (enemy[loop2].fy<enemy[loop2].y*40)	// Is Fine Position On Y Axis Lower Than Intended Position?
                            {
                                enemy[loop2].fy+=steps[adjust];	// If So, Increase Fine Position On Y Axis
                                enemy[loop2].spin+=steps[adjust];	// Spin Enemy Clockwise
                            }
                            if (enemy[loop2].fy>enemy[loop2].y*40)	// Is Fine Position On Y Axis Higher Than Intended Position?
                            {
                                enemy[loop2].fy-=steps[adjust];	// If So, Decrease Fine Position On Y Axis
                                enemy[loop2].spin-=steps[adjust];	// Spin Enemy Counter Clockwise
                            }
                        }
                    }
    After moving the enemies we check to see if any of them have hit the player. We want accuracy so we compare the enemy fine positions with the player fine positions. If the enemy fx position equals the player fx position and the enemy fy position equals the player fy position the player is DEAD :)

    If the player is dead, we decrease lives. Then we check to make sure the player isn't out of lives by checking to see if lives equals 0. If lives does equal zero, we set gameover to TRUE.

    We then reset our objects by calling ResetObjects(), and play the death sound.

    Sound is new in this tutorial. I've decided to use the most basic sound routine available... PlaySound(). PlaySound() takes three parameters. First we give it the name of the file we want to play. In this case we want it to play the Die .WAV file in the Data directory. The second parameter can be ignored. We'll set it to NULL. The third parameter is the flag for playing the sound. The two most common flags are: SND_SYNC which stops everything else until the sound is done playing, and SND_ASYNC, which plays the sound, but doesn't stop the program from running. We want a little delay after the player dies so we use SND_SYNC. Pretty easy!

    The one thing I forgot to mention at the beginning of the program: In order to use PlaySound(), you have to include the WINMM.LIB file under PROJECT / SETTINGS / LINK in Visual C++. Winmm.lib is the Windows Multimedia Library.
                        // Are Any Of The Enemies On Top Of The Player?
                    if ((enemy[loop1].fx==player.fx) && (enemy[loop1].fy==player.fy))
                    {
                        lives--;			// If So, Player Loses A Life

                        if (lives==0)			// Are We Out Of Lives?
                        {
                            gameover=TRUE;		// If So, gameover Becomes TRUE
                        }

                        ResetObjects();			// Reset Player / Enemy Positions
                        PlaySound("Data/Die.wav", NULL, SND_SYNC);	// Play The Death Sound
                    }
                }
    Now we can move the player. In the first line of code below we check to see if the right arrow is being pressed, player.x is less than 10 (don't want to go off the grid), that player.fx equals player.x times 60 (lined up with a grid crossing on the x-axis, and that player.fy equals player.y times 40 (player is lined up with a grid crossing on the y-axis).

    If we didn't make sure the player was at a crossing, and we allowed the player to move anyways, the player would cut right through the middle of boxes, just like the enemies would have done if we didn't make sure they were lined up with a vertical or horizontal line. Checking this also makes sure the player is done moving before we move to a new location.

    If the player is at a grid crossing (where a vertical and horizontal lines meet) and he's not to far right, we mark the current horizontal line that we are on as being traced over. We then increase the player.x value by one, causing the new player position to be one box to the right.

    We do the same thing while moving left, down and up. When moving left, we make sure the player wont be going off the left side of the grid. When moving down we make sure the player wont be leaving the bottom of the grid, and when moving up we make sure the player doesn't go off the top of the grid.

    When moving left and right we make the horizontal line (hline[ ] [ ]) under us TRUE meaning it's been traced. When moving up and down we make the vertical line (vline[ ] [ ]) under us TRUE meaning it has been traced.
                    if (keys[VK_RIGHT] && (player.x<10) && (player.fx==player.x*60) && (player.fy==player.y*40))
                {
                    hline[player.x][player.y]=TRUE;		// Mark The Current Horizontal Border As Filled
                    player.x++;				// Move The Player Right
                }
                if (keys[VK_LEFT] && (player.x>0) && (player.fx==player.x*60) && (player.fy==player.y*40))
                {
                    player.x--;				// Move The Player Left
                    hline[player.x][player.y]=TRUE;		// Mark The Current Horizontal Border As Filled
                }
                if (keys[VK_DOWN] && (player.y<10) && (player.fx==player.x*60) && (player.fy==player.y*40))
                {
                    vline[player.x][player.y]=TRUE;		// Mark The Current Verticle Border As Filled
                    player.y++;				// Move The Player Down
                }
                if (keys[VK_UP] && (player.y>0) && (player.fx==player.x*60) && (player.fy==player.y*40))
                {
                    player.y--;				// Move The Player Up
                    vline[player.x][player.y]=TRUE;		// Mark The Current Verticle Border As Filled
                }
    We increase / decrease the player fine fx and fy variables the same way we increase / decreased the enemy fine fx and fy variables.

    If the player fx value is less than the player x value times 60 we increase the player fx position by the step speed our game is running at based on the value of adjust.

    If the player fx value is greater than the player x value times 60 we decrease the player fx position by the step speed our game is running at based on the value of adjust.

    If the player fy value is less than the player y value times 40 we increase the player fy position by the step speed our game is running at based on the value of adjust.

    If the player fy value is greater than the player y value times 40 we decrease the player fy position by the step speed our game is running at based on the value of adjust.
                    if (player.fx<player.x*60)			// Is Fine Position On X Axis Lower Than Intended Position?
                {
                    player.fx+=steps[adjust];		// If So, Increase The Fine X Position
                }
                if (player.fx>player.x*60)			// Is Fine Position On X Axis Greater Than Intended Position?
                {
                    player.fx-=steps[adjust];		// If So, Decrease The Fine X Position
                }
                if (player.fy<player.y*40)			// Is Fine Position On Y Axis Lower Than Intended Position?
                {
                    player.fy+=steps[adjust];		// If So, Increase The Fine Y Position
                }
                if (player.fy>player.y*40)			// Is Fine Position On Y Axis Lower Than Intended Position?
                {
                    player.fy-=steps[adjust];		// If So, Decrease The Fine Y Position
                }
            }
    If the game is over the following bit of code will run. We check to see if the spacebar is being pressed. If it is we set gameover to FALSE (starting the game over). We set filled to TRUE. This causes the game to think we've finished a stage, causing the player to be reset, along with the enemies.

    We set the starting level to 1, along with the actual displayed level (level2). We set stage to 0. The reason we do this is because after the computer sees that the grid has been filled in, it will think you finished a stage, and will increase stage by 1. Because we set stage to 0, when the stage increases it will become 1 (exactly what we want). Lastly we set lives back to 5.
                else							// Otherwise
            {
                if (keys[' '])					// If Spacebar Is Being Pressed
                {
                    gameover=FALSE;				// gameover Becomes FALSE
                    filled=TRUE;				// filled Becomes TRUE
                    level=1;				// Starting Level Is Set Back To One
                    level2=1;				// Displayed Level Is Also Set To One
                    stage=0;				// Game Stage Is Set To Zero
                    lives=5;				// Lives Is Set To Five
                }
            }
    The code below checks to see if the filled flag is TRUE (meaning the grid has been filled in). filled can be set to TRUE one of two ways. Either the grid is filled in completely and filled becomes TRUE or the game has ended but the spacebar was pressed to restart it (code above).

    If filled is TRUE, the first thing we do is play the cool level complete tune. I've already explained how PlaySound() works. This time we'll be playing the Complete .WAV file in the DATA directory. Again, we use SND_SYNC so that there is a delay before the game starts on the next stage.

    After the sound has played, we increase stage by one, and check to make sure stage isn't greater than 3. If stage is greater than 3 we set stage to 1, and increase the internal level and visible level by one.

    If the internal level is greater than 3 we set the internal leve (level) to 3, and increase lives by 1. If you're amazing enough to get past level 3 you deserve a free life :). After increasing lives we check to make sure the player doesn't have more than 5 lives. If lives is greater than 5 we set lives back to 5.
                if (filled)						// Is The Grid Filled In?
            {
                PlaySound("Data/Complete.wav", NULL, SND_SYNC);	// If So, Play The Level Complete Sound
                stage++;					// Increase The Stage
                if (stage>3)					// Is The Stage Higher Than 3?
                {
                    stage=1;				// If So, Set The Stage To One
                    level++;				// Increase The Level
                    level2++;				// Increase The Displayed Level
                    if (level>3)				// Is The Level Greater Than 3?
                    {
                        level=3;			// If So, Set The Level To 3
                        lives++;			// Give The Player A Free Life
                        if (lives>5)			// Does The Player Have More Than 5 Lives?
                        {
                            lives=5;		// If So, Set Lives To Five
                        }
                    }
                }
    We then reset all the objects (such as the player and enemies). This places the player back at the top left corner of the grid, and gives the enemies random locations on the grid.

    We create two loops (loop1 and loop2) to loop through the grid. We set all the vertical and horizontal lines to FALSE. If we didn't do this, the next stage would start, and the game would think the grid was still filled in.

    Notice the routine we use to clear the grid is similar to the routine we use to draw the grid. We have to make sure the lines are not being drawn to far right or down. That's why we check to make sure that loop1 is less than 10 before we reset the horizontal lines, and we check to make sure that loop2 is less than 10 before we reset the vertical lines.
                    ResetObjects();					// Reset Player / Enemy Positions

                for (loop1=0; loop1<11; loop1++)		// Loop Through The Grid X Coordinates
                {
                    for (loop2=0; loop2<11; loop2++)	// Loop Through The Grid Y Coordinates
                    {
                        if (loop1<10)			// If X Coordinate Is Less Than 10
                        {
                            hline[loop1][loop2]=FALSE;	// Set The Current Horizontal Value To FALSE
                        }
                        if (loop2<10)			// If Y Coordinate Is Less Than 10
                        {
                            vline[loop1][loop2]=FALSE;	// Set The Current Vertical Value To FALSE
                        }
                    }
                }
            }
    Now we check to see if the player has hit the hourglass. If the fine player fx value is equal to the hourglass x value times 60 and the fine player fy value is equal to the hourglass y value times 40 AND hourglass.fx is equal to 1 (meaning the hourglass is displayed on the screen), the code below runs.

    The first line of code is PlaySound("Data/freeze.wav",NULL, SND_ASYNC | SND_LOOP). This line plays the freeze .WAV file in the DATA directory. Notice we are using SND_ASYNC this time. We want the freeze sound to play without the game stopping. SND_LOOP keeps the sound playing endlessly until we tell it to stop playing, or until another sound is played.

    After we have started the sound playing, we set hourglass.fx to 2. When hourglass.fx equals 2 the hourglass will no longer be drawn, the enemies will stop moving, and the sound will loop endlessly.

    We also set hourglass.fy to 0. hourglass.fy is a counter. When it hits a certain value, the value of hourglass.fx will change.
                // If The Player Hits The Hourglass While It's Being Displayed On The Screen
            if ((player.fx==hourglass.x*60) && (player.fy==hourglass.y*40) && (hourglass.fx==1))
            {
                // Play Freeze Enemy Sound
                PlaySound("Data/freeze.wav", NULL, SND_ASYNC | SND_LOOP);
                hourglass.fx=2;					// Set The hourglass fx Variable To Two
                hourglass.fy=0;					// Set The hourglass fy Variable To Zero
            }
    This bit of code increases the player spin value by half the speed that the game runs at. If player.spin is greater than 360.0f we subtract 360.0f from player.spin. Keeps the value of player.spin from getting to high.
                player.spin+=0.5f*steps[adjust];			// Spin The Player Clockwise
            if (player.spin>360.0f)					// Is The spin Value Greater Than 360?
            {
                player.spin-=360;				// If So, Subtract 360
            }
    The code below decreases the hourglass spin value by 1/4 the speed that the game is running at. If hourglass.spin is less than 0.0f we add 360.0f. We don't want hourglass.spin to become a negative number.
                hourglass.spin-=0.25f*steps[adjust];			// Spin The Hourglass Counter Clockwise
            if (hourglass.spin<0.0f)				// Is The spin Value Less Than 0?
            {
                hourglass.spin+=360.0f;				// If So, Add 360
            }
    The first line below increased the hourglass counter that I was talking about. hourglass.fy is increased by the game speed (game speed is the steps value based on the value of adjust).

    The second line checks to see if hourglass.fx is equal to 0 (non visible) and the hourglass counter (hourglass.fy) is greater than 6000 divided by the current internal level (level).

    If the fx value is 0 and the counter is greater than 6000 divided by the internal level we play the hourglass .WAV file in the DATA directory. We don't want the action to stop so we use SND_ASYNC. We won't loop the sound this time though, so once the sound has played, it wont play again.

    After we've played the sound we give the hourglass a random value on the x-axis. We add one to the random value so that the hourglass doesn't appear at the players starting position at the top left of the grid. We also give the hourglass a random value on the y-axis. We set hourglass.fx to 1 this makes the hourglass appear on the screen at it's new location. We also set hourglass.fy back to zero so it can start counting again.

    This causes the hourglass to appear on the screen after a fixed amount of time.
                hourglass.fy+=steps[adjust];				// Increase The hourglass fy Variable
            if ((hourglass.fx==0) && (hourglass.fy>6000/level))	// Is The hourglass fx Variable Equal To 0 And The fy
            {							// Variable Greater Than 6000 Divided By The Current Level?
                PlaySound("Data/hourglass.wav", NULL, SND_ASYNC);	// If So, Play The Hourglass Appears Sound
                hourglass.x=rand()%10+1;			// Give The Hourglass A Random X Value
                hourglass.y=rand()%11;				// Give The Hourglass A Random Y Value
                hourglass.fx=1;					// Set hourglass fx Variable To One (Hourglass Stage)
                hourglass.fy=0;					// Set hourglass fy Variable To Zero (Counter)
            }
    If hourglass.fx is equal to zero and hourglass.fy is greater than 6000 divided by the current internal level (level) we set hourglass.fx back to 0, causing the hourglass to disappear. We also set hourglass.fy to 0 so it can start counting once again.

    This causes the hourglass to disappear if you don't get it after a certain amount of time.
                if ((hourglass.fx==1) && (hourglass.fy>6000/level))	// Is The hourglass fx Variable Equal To 1 And The fy
            {							// Variable Greater Than 6000 Divided By The Current Level?
                hourglass.fx=0;					// If So, Set fx To Zero (Hourglass Will Vanish)
                hourglass.fy=0;					// Set fy to Zero (Counter Is Reset)
            }
    Now we check to see if the 'freeze enemy' timer has run out after the player has touched the hourglass.

    if hourglass.fx equal 2 and hourglass.fy is greater than 500 plus 500 times the current internal level we kill the timer sound that we started playing endlessly. We kill the sound with the command PlaySound(NULL, NULL, 0). We set hourglass.fx back to 0, and set hourglass.fy to 0. Setting fx and fy to 0 starts the hourglass cycle from the beginning. fy will have to hit 6000 divided by the current internal level before the hourglass appears again.
                if ((hourglass.fx==2) && (hourglass.fy>500+(500*level)))// Is The hourglass fx Variable Equal To 2 And The fy
            {							// Variable Greater Than 500 Plus 500 Times The Current Level?
                PlaySound(NULL, NULL, 0);			// If So, Kill The Freeze Sound
                hourglass.fx=0;					// Set hourglass fx Variable To Zero
                hourglass.fy=0;					// Set hourglass fy Variable To Zero
            }
    The last thing to do is increase the variable delay. If you remember, delay is used to update the player movement and animation. If our program has finished, we kill the window and return to the desktop.
                delay++;						// Increase The Enemy Delay Counter
        }
    }

    // Shutdown
    KillGLWindow();								// Kill The Window
    return (msg.wParam);							// Exit The Program
}
    I spent a long time writing this tutorial. It started out as a simple line tutorial, and flourished into an entertaining mini game. Hopefully you can use what you have learned in this tutorial in GL projects of your own. I know alot of you have been asking about TILE based games. Well you can't get more tiled than this :) I've also gotten alot of emails asking how to do exact pixel plotting. I think I've got it covered :) Most importantly, this tutorial not only teaches you new things about OpenGL, it also teaches you how to use simple sounds to add excitement to your visual works of art! I hope you've enjoyed this tutorial. If you feel I have incorrectly commented something or that the code could be done better in some sections, please let me know. I want to make the best OpenGL tutorials I can and I'm interested in hearing your feedback.

    Please note, this was an extremely large projects. I tried to comment everything as clearly as possible, but putting what things into words isn't as easy as it may seem. I know how everything works off by heart, but trying to explain is a different story :) If you've read through the tutorial and have a better way to word things, or if you feel diagrams might help out, please send me suggestions. I want this tutorial to be easy to follow through. Also note that this is not a beginner tutorial. If you haven't read through the previous tutorials please don't email me with questions until you have. Thanks.


Lesson 22 - Bump-Mapping, Multi-Texturing & Extensions

Lesson 22
This lesson was written by Jens Schneider. It is loosely based on Lesson 06, though lots of changes were made. In this lesson you will learn:
  • How to control your graphic-accelerator’s multitexture-features.
  • How to do a "fake" Emboss Bump Mapping.
  • How to do professional looking logos that "float" above your rendered scene using blending.
  • Basics about multi-pass rendering techniques.
  • How to do matrix-transformations efficiently.
Since at least three of the above four points can be considered "advanced rendering techniques", you should already have a general understanding of OpenGL’s rendering pipeline. You should know most commands already used in these tutorials, and you should be familiar with vector-maths. Every now and then you’ll encounter a block that reads begin theory(...) as header and end theory(...) as an ending. These sections try to teach you theory about the issue(s) mentioned in parenthesis. This is to ensure that, if you already know about the issue, you can easily skip them. If you encounter problems while trying to understand the code, consider going back to the theory sections. Last but not least: This lesson consists out of more than 1,200 lines of code, of which large parts are not only boring but also known among those that read earlier tutorials. Thus I will not comment each line, only the crux. If you encounter something like this >…<, it means that lines of code have been omitted.

Here we go:
#include <windows.h>								// Header File For Windows
#include <stdio.h>								// Header File For Standard Input/Output
#include <gl\gl.h>								// Header File For The OpenGL32 Library
#include <gl\glu.h>								// Header File For The GLu32 Library
#include <gl\glaux.h>								// Header File For The GLaux Library
#include "glext.h"								// Header File For Multitexturing
#include <string.h>								// Header File For The String Library
#include <math.h>								// Header File For The Math Library
The GLfloat MAX_EMBOSS specifies the "strength" of the Bump Mapping-Effect. Larger values strongly enhance the effect, but reduce visual quality to the same extent by leaving so-called "artefacts" at the edges of the surfaces.
#define MAX_EMBOSS (GLfloat)0.01f						// Maximum Emboss-Translate. Increase To Get Higher Immersion
Ok, now let’s prepare the use of the GL_ARB_multitexture extension. It’s quite simple:

Most accelerators have more than just one texture-unit nowadays. To benefit of this feature, you’ll have to check for GL_ARB_multitexture-support, which enables you to map two or more different textures to one OpenGL-primitive in just one pass. Sounds not too powerful, but it is! Nearly all the time if you’re programming something, putting another texture on that object results in higher visual quality. Since you usually need multiple "passes" consisting out of interleaved texture-selection and drawing geometry, this can quickly become expensive. But don’t worry, this will become clearer later on.

Now back to code: __ARB_ENABLE is used to override multitexturing for a special compile-run entirely. If you want to see your OpenGL-extensions, just un-comment the #define EXT_INFO. Next, we want to check for our extensions during run-time to ensure our code stays portable. So we need space for some strings. These are the following two lines. Now we want to distinguish between being able to do multitexture and using it, so we need another two flags. Last, we need to know how many texture-units are present(we’re going to use only two of them, though). At least one texture-unit is present on any OpenGL-capable accelerator, so we initialize maxTexelUnits with 1.
#define __ARB_ENABLE true							// Used To Disable ARB Extensions Entirely
// #define EXT_INFO								// Uncomment To See Your Extensions At Start-Up?
#define MAX_EXTENSION_SPACE 10240						// Characters For Extension-Strings
#define MAX_EXTENSION_LENGTH 256						// Maximum Characters In One Extension-String
bool multitextureSupported=false;						// Flag Indicating Whether Multitexturing Is Supported
bool useMultitexture=true;							// Use It If It Is Supported?
GLint maxTexelUnits=1;								// Number Of Texel-Pipelines. This Is At Least 1.
The following lines are needed to “link” the extensions to C++ function calls. Just treat the PFN-who-ever-reads-this as pre-defined datatype able to describe function calls. Since we are unsure if we’ll get the functions to these prototypes, we set them to NULL. The commands glMultiTexCoordifARB map to the well-known glTexCoordif, specifying i-dimensional texture-coordinates. Note that these can totally substitute the glTexCoordif-commands. Since we only use the GLfloat-version, we only need prototypes for the commands ending with an "f". Other are also available ("fv", "i", etc.). The last two prototypes are to set the active texture-unit that is currently receiving texture-bindings ( glActiveTextureARB() ) and to determine which texture-unit is associated with the ArrayPointer-command (a.k.a. Client-Subset, thus glClientActiveTextureARB). By the way: ARB is an abbreviation for "Architectural Review Board". Extensions with ARB in their name are not required by an OpenGL-conformant implementation, but they are expected to be widely supported. Currently, only the multitexture-extension has made it to ARB-status. This may be treated as sign for the tremendous impact regarding speed multitexturing has on several advanced rendering techniques.

The lines ommitted are GDI-context handles etc.
PFNGLMULTITEXCOORD1FARBPROC	glMultiTexCoord1fARB	= NULL;
PFNGLMULTITEXCOORD2FARBPROC	glMultiTexCoord2fARB	= NULL;
PFNGLMULTITEXCOORD3FARBPROC	glMultiTexCoord3fARB	= NULL;
PFNGLMULTITEXCOORD4FARBPROC	glMultiTexCoord4fARB	= NULL;
PFNGLACTIVETEXTUREARBPROC	glActiveTextureARB	= NULL;
PFNGLCLIENTACTIVETEXTUREARBPROC	glClientActiveTextureARB= NULL;
We need global variables:
  • filter specifies what filter to use. Refer to Lesson 06. We’ll usually just take GL_LINEAR, so we initialise with 1.
  • texture holds our base-texture, three times, one per filter.
  • bump holds our bump maps
  • invbump holds our inverted bump maps. This is explained later on in a theory-section.
  • The Logo-things hold textures for several billboards that will be added to rendering output as a final pass.
  • The Light...-stuff contains data on our OpenGL light-source.
GLuint  filter=1;								// Which Filter To Use
GLuint  texture[3];								// Storage For 3 Textures
GLuint  bump[3];								// Our Bumpmappings
GLuint  invbump[3];								// Inverted Bumpmaps
GLuint  glLogo;									// Handle For OpenGL-Logo
GLuint  multiLogo;								// Handle For Multitexture-Enabled-Logo
GLfloat LightAmbient[]	= { 0.2f, 0.2f, 0.2f};					// Ambient Light Is 20% White
GLfloat LightDiffuse[]	= { 1.0f, 1.0f, 1.0f};					// Diffuse Light Is White
GLfloat LightPosition[]	= { 0.0f, 0.0f, 2.0f};					// Position Is Somewhat In Front Of Screen
GLfloat Gray[]		= { 0.5f, 0.5f, 0.5f, 1.0f};
The next block of code contains the numerical representation of a textured cube built out of GL_QUADS. Each five numbers specified represent one set of 2D-texture-coordinates one set of 3D-vertex-coordinates. This is to build the cube using for-loops, since we need that cube several times. The data-block is followed by the well-known WndProc()-prototype from former lessons.
// Data Contains The Faces Of The Cube In Format 2xTexCoord, 3xVertex.
// Note That The Tesselation Of The Cube Is Only Absolute Minimum.

GLfloat data[]= {
    // FRONT FACE
    0.0f, 0.0f,		-1.0f, -1.0f, +1.0f,
    1.0f, 0.0f,		+1.0f, -1.0f, +1.0f,
    1.0f, 1.0f,		+1.0f, +1.0f, +1.0f,
    0.0f, 1.0f,		-1.0f, +1.0f, +1.0f,
    // BACK FACE
    1.0f, 0.0f,		-1.0f, -1.0f, -1.0f,
    1.0f, 1.0f,		-1.0f, +1.0f, -1.0f,
    0.0f, 1.0f,		+1.0f, +1.0f, -1.0f,
    0.0f, 0.0f,		+1.0f, -1.0f, -1.0f,
    // Top Face
    0.0f, 1.0f,		-1.0f, +1.0f, -1.0f,
    0.0f, 0.0f,		-1.0f, +1.0f, +1.0f,
    1.0f, 0.0f,		+1.0f, +1.0f, +1.0f,
    1.0f, 1.0f,		+1.0f, +1.0f, -1.0f,
    // Bottom Face
    1.0f, 1.0f,		-1.0f, -1.0f, -1.0f,
    0.0f, 1.0f,		+1.0f, -1.0f, -1.0f,
    0.0f, 0.0f,		+1.0f, -1.0f, +1.0f,
    1.0f, 0.0f,		-1.0f, -1.0f, +1.0f,
    // Right Face
    1.0f, 0.0f,		+1.0f, -1.0f, -1.0f,
    1.0f, 1.0f,		+1.0f, +1.0f, -1.0f,
    0.0f, 1.0f,		+1.0f, +1.0f, +1.0f,
    0.0f, 0.0f,		+1.0f, -1.0f, +1.0f,
    // Left Face
    0.0f, 0.0f,		-1.0f, -1.0f, -1.0f,
    1.0f, 0.0f,		-1.0f, -1.0f, +1.0f,
    1.0f, 1.0f,		-1.0f, +1.0f, +1.0f,
    0.0f, 1.0f,		-1.0f, +1.0f, -1.0f
};

LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);				// Declaration For WndProc
The next block of code is to determine extension-support during run-time.

First, we can assume that we have a long string containing all supported extensions as ‘\n’-seperated sub-strings. So all we need to do is to search for a ‘\n’ and start comparing string with search until we encounter another ‘\n’ or until string doesn’t match search anymore. In the first case, return a true for "found", in the other case, take the next sub-string until you encounter the end of string. You’ll have to watch a little bit at the beginning of string, since it does not begin with a newline-character.

By the way: A common rule is to ALWAYS check during runtime for availability of a given extension!
bool isInString(char *string, const char *search) {
    int pos=0;
    int maxpos=strlen(search)-1;
    int len=strlen(string);
    char *other;
    for (int i=0; i<len; i++) {
        if ((i==0) || ((i>1) && string[i-1]=='\n')) {			// New Extension Begins Here!
            other=&string[i];
            pos=0;							// Begin New Search
            while (string[i]!='\n') {				// Search Whole Extension-String
                if (string[i]==search[pos]) pos++;		// Next Position
                if ((pos>maxpos) && string[i+1]=='\n') return true;	// We Have A Winner!
                i++;
            }
        }
    }
    return false;								// Sorry, Not Found!
}
Now we have to fetch the extension-string and convert it to be ‘\n’-separated in order to search it for our desired extension. If we find a sub-string ”GL_ARB_multitexture” in it, this feature is supported. But we only can use it, if __ARB_ENABLE is also true. Last but not least we need GL_EXT_texture_env_combine to be supported. This extension introduces new ways how the texture-units interact. We need this, since GL_ARB_multitexture only feeds the output from one texture unit to the one with the next higher number. So we rather check for this extension than using another complex blending equation (that would not exactly do the same effect!) If all extensions are supported and we are not overridden, we’ll first determine how much texture-units are available, saving them in maxTexelUnits. Then we have to link the functions to our names. This is done by the wglGetProcAdress()-calls with a string naming the function call as parameter and a prototype-cast to ensure we’ll get the correct function type.
bool initMultitexture(void) {
    char *extensions;
    extensions=(char *) glGetString(GL_EXTENSIONS);				// Fetch Extension String
    int len=strlen(extensions);
    for (int i=0; i<len; i++)						// Separate It By Newline Instead Of Blank
        if (extensions[i]==' ') extensions[i]='\n';

#ifdef EXT_INFO
    MessageBox(hWnd,extensions,"supported GL extensions",MB_OK | MB_ICONINFORMATION);
#endif

    if (isInString(extensions,"GL_ARB_multitexture")			// Is Multitexturing Supported?
        && __ARB_ENABLE							// Override Flag
        && isInString(extensions,"GL_EXT_texture_env_combine"))		// texture-environment-combining supported?
    {
        glGetIntegerv(GL_MAX_TEXTURE_UNITS_ARB,&maxTexelUnits);
        glMultiTexCoord1fARB = (PFNGLMULTITEXCOORD1FARBPROC) wglGetProcAddress("glMultiTexCoord1fARB");
        glMultiTexCoord2fARB = (PFNGLMULTITEXCOORD2FARBPROC) wglGetProcAddress("glMultiTexCoord2fARB");
        glMultiTexCoord3fARB = (PFNGLMULTITEXCOORD3FARBPROC) wglGetProcAddress("glMultiTexCoord3fARB");
        glMultiTexCoord4fARB = (PFNGLMULTITEXCOORD4FARBPROC) wglGetProcAddress("glMultiTexCoord4fARB");
        glActiveTextureARB   = (PFNGLACTIVETEXTUREARBPROC) wglGetProcAddress("glActiveTextureARB");
        glClientActiveTextureARB= (PFNGLCLIENTACTIVETEXTUREARBPROC) wglGetProcAddress("glClientActiveTextureARB");

#ifdef EXT_INFO
        MessageBox(hWnd,"The GL_ARB_multitexture extension will be used.","feature supported!",MB_OK | MB_ICONINFORMATION);
#endif

        return true;
    }
    useMultitexture=false;							// We Can't Use It If It Isn't Supported!
    return false;
}
InitLights() just initialises OpenGL-Lighting and is called by InitGL() later on.
void initLights(void) {
        glLightfv(GL_LIGHT1, GL_AMBIENT, LightAmbient);				// Load Light-Parameters into GL_LIGHT1
        glLightfv(GL_LIGHT1, GL_DIFFUSE, LightDiffuse);
        glLightfv(GL_LIGHT1, GL_POSITION, LightPosition);
        glEnable(GL_LIGHT1);
}
Here we load LOTS of textures. Since auxDIBImageLoad() has an error-handler of it’s own and since LoadBMP() wasn’t much predictable without a try-catch-block, I just kicked it. But now to our loading-routine. First, we load the base-bitmap and build three filtered textures out of it ( GL_NEAREST, GL_LINEAR and GL_LINEAR_MIPMAP_NEAREST). Note that I only use one data-structure to hold bitmaps, since we only need one at a time to be open. Over that I introduced a new data-structure called alpha here. It is to hold the alpha-layer of textures, so that I can save RGBA Images as two bitmaps: one 24bpp RGB and one 8bpp greyscale Alpha. For the status-indicator to work properly, we have to delete the Image-block after every load to reset it to NULL.

Note also, that I use GL_RGB8 instead of just "3" when specifying texture-type. This is to be more conformant to upcoming OpenGL-ICD releases and should always be used instead of just another number. I marked it in orange for you.
int LoadGLTextures() {								// Load Bitmaps And Convert To Textures
    bool status=true;							// Status Indicator
    AUX_RGBImageRec *Image=NULL;						// Create Storage Space For The Texture
    char *alpha=NULL;

    // Load The Tile-Bitmap for Base-Texture
    if (Image=auxDIBImageLoad("Data/Base.bmp")) {
        glGenTextures(3, texture);					// Create Three Textures

        // Create Nearest Filtered Texture
        glBindTexture(GL_TEXTURE_2D, texture[0]);
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_NEAREST);
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_NEAREST);
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB8, Image->sizeX, Image->sizeY, 0, GL_RGB, GL_UNSIGNED_BYTE, Image->data);

        // Create Linear Filtered Texture
        glBindTexture(GL_TEXTURE_2D, texture[1]);
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGB8, Image->sizeX, Image->sizeY, 0, GL_RGB, GL_UNSIGNED_BYTE, Image->data);

        // Create MipMapped Texture
        glBindTexture(GL_TEXTURE_2D, texture[2]);
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR_MIPMAP_NEAREST);
        gluBuild2DMipmaps(GL_TEXTURE_2D, GL_RGB8, Image->sizeX, Image->sizeY, GL_RGB, GL_UNSIGNED_BYTE, Image->data);
    }
    else status=false;

    if (Image) {								// If Texture Exists
        if (Image->data) delete Image->data;				// If Texture Image Exists
        delete Image;
        Image=NULL;
    }
Now we’ll load the Bump Map. For reasons discussed later, it has to have only 50% luminance, so we have to scale it in the one or other way. I chose to scale it using the glPixelTransferf()-commands, that specifies how data from bitmaps is converted to textures on pixel-basis. I use it to scale the RGB components of bitmaps to 50%. You should really have a look at the glPixelTransfer()-command family if you’re not already using them in your programs. They’re all quite useful.

Another issue is, that we don’t want to have our bitmap repeated over and over in the texture. We just want it once, mapping to texture-coordinates (s,t)=(0.0f, 0.0f) thru (s,t)=(1.0f, 1.0f). All other texture-coordinates should be mapped to plain black. This is accomplished by the two glTexParameteri()-calls that are fairly self-explanatory and "clamp" the bitmap in s and t-direction.
    // Load The Bumpmaps
    if (Image=auxDIBImageLoad("Data/Bump.bmp")) {
        glPixelTransferf(GL_RED_SCALE,0.5f);				// Scale RGB By 50%, So That We Have Only
        glPixelTransferf(GL_GREEN_SCALE,0.5f);				// Half Intenstity
        glPixelTransferf(GL_BLUE_SCALE,0.5f);
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_S,GL_CLAMP);	// No Wrapping, Please!
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_WRAP_T,GL_CLAMP);
        glGenTextures(3, bump);						// Create Three Textures

        // Create Nearest Filtered Texture
        >…<

        // Create Linear Filtered Texture
        >…<

        // Create MipMapped Texture
        >…<
You’ll already know this sentence by now: For reasons discussed later, we have to build an inverted Bump Map, luminance at most 50% once again. So we subtract the bumpmap from pure white, which is {255, 255, 255} in integer representation. Since we do NOT set the RGB-Scaling back to 100% (took me about three hours to figure out that this was a major error in my first version!), the inverted bumpmap will be scaled once again to 50% luminance.
        for (int i=0; i<3*Image->sizeX*Image->sizeY; i++)		// Invert The Bumpmap
            Image->data[i]=255-Image->data[i];

        glGenTextures(3, invbump);					// Create Three Textures

        // Create Nearest Filtered Texture
        >…<

        // Create Linear Filtered Texture
        >…<

        // Create MipMapped Texture
        >…<
    }
    else status=false;
    if (Image) {								// If Texture Exists
        if (Image->data) delete Image->data;				// If Texture Image Exists
        delete Image;
        Image=NULL;
    }
Loading the Logo-Bitmaps is pretty much straightforward except for the RGB-A recombining, which should be self-explanatory enough for you to understand. Note that the texture is built from the alpha-memoryblock, not from the Image-memoryblock! Only one filter is used here.
    // Load The Logo-Bitmaps
    if (Image=auxDIBImageLoad("Data/OpenGL_ALPHA.bmp")) {
        alpha=new char[4*Image->sizeX*Image->sizeY];
        // Create Memory For RGBA8-Texture
        for (int a=0; a<Image->sizeX*Image->sizeY; a++)
            alpha[4*a+3]=Image->data[a*3];				// Pick Only Red Value As Alpha!
        if (!(Image=auxDIBImageLoad("Data/OpenGL.bmp"))) status=false;
        for (a=0; a<Image->sizeX*Image->sizeY; a++) {
            alpha[4*a]=Image->data[a*3];				// R
            alpha[4*a+1]=Image->data[a*3+1];			// G
            alpha[4*a+2]=Image->data[a*3+2];			// B
        }

        glGenTextures(1, &glLogo);					// Create One Textures

        // Create Linear Filtered RGBA8-Texture
        glBindTexture(GL_TEXTURE_2D, glLogo);
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
        glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA8, Image->sizeX, Image->sizeY, 0, GL_RGBA, GL_UNSIGNED_BYTE, alpha);
        delete alpha;
    }
    else status=false;

    if (Image) {								// If Texture Exists
        if (Image->data) delete Image->data;				// If Texture Image Exists
        delete Image;
        Image=NULL;
    }

    // Load The "Extension Enabled"-Logo
    if (Image=auxDIBImageLoad("Data/multi_on_alpha.bmp")) {
        alpha=new char[4*Image->sizeX*Image->sizeY];			// Create Memory For RGBA8-Texture
        >…<
        glGenTextures(1, &multiLogo);					// Create One Textures
        // Create Linear Filtered RGBA8-Texture
        >…<
        delete alpha;
    }
    else status=false;

    if (Image) {								// If Texture Exists
        if (Image->data) delete Image->data;				// If Texture Image Exists
        delete Image;
        Image=NULL;
    }
    return status;								// Return The Status
}
Next comes nearly the only unmodified function ReSizeGLScene(). I’ve omitted it here. It is followed by a function doCube() that draws a cube, complete with normalized normals. Note that this version only feeds texture-unit #0, since glTexCoord2f(s,t) is the same thing as glMultiTexCoord2f(GL_TEXTURE0_ARB,s,t). Note also that the cube could be done using interleaved arrays, but this is definitely another issue. Note also that this cube CAN NOT be done using a display list, since display-lists seem to use an internal floating point accuracy different from GLfloat. Since this leads to several nasty effects, generally referred to as "decaling"-problems, I kicked display lists. I assume that a general rule for multipass algorithms is to do the entire geometry with or without display lists. So never dare mixing even if it seems to run on your hardware, since it won’t run on any hardware!
GLvoid ReSizeGLScene(GLsizei width, GLsizei height)
// Resize And Initialize The GL Window
>…<

void doCube (void) {
    int i;
    glBegin(GL_QUADS);
        // Front Face
        glNormal3f( 0.0f, 0.0f, +1.0f);
        for (i=0; i<4; i++) {
            glTexCoord2f(data[5*i],data[5*i+1]);
            glVertex3f(data[5*i+2],data[5*i+3],data[5*i+4]);
        }
        // Back Face
        glNormal3f( 0.0f, 0.0f,-1.0f);
        for (i=4; i<8; i++) {
            glTexCoord2f(data[5*i],data[5*i+1]);
            glVertex3f(data[5*i+2],data[5*i+3],data[5*i+4]);
        }
        // Top Face
        glNormal3f( 0.0f, 1.0f, 0.0f);
        for (i=8; i<12; i++) {
            glTexCoord2f(data[5*i],data[5*i+1]);
            glVertex3f(data[5*i+2],data[5*i+3],data[5*i+4]);
        }
        // Bottom Face
        glNormal3f( 0.0f,-1.0f, 0.0f);
        for (i=12; i<16; i++) {
            glTexCoord2f(data[5*i],data[5*i+1]);
            glVertex3f(data[5*i+2],data[5*i+3],data[5*i+4]);
        }
        // Right Face
        glNormal3f( 1.0f, 0.0f, 0.0f);
        for (i=16; i<20; i++) {
            glTexCoord2f(data[5*i],data[5*i+1]);
            glVertex3f(data[5*i+2],data[5*i+3],data[5*i+4]);
        }
        // Left Face
        glNormal3f(-1.0f, 0.0f, 0.0f);
        for (i=20; i<24; i++) {
            glTexCoord2f(data[5*i],data[5*i+1]);
            glVertex3f(data[5*i+2],data[5*i+3],data[5*i+4]);
        }
    glEnd();
}
Time to initialize OpenGL. All as in Lesson 06, except that I call initLights() instead of setting them here. Oh, and of course I’m calling Multitexture-setup, here!
int InitGL(GLvoid)								// All Setup For OpenGL Goes Here
{
    multitextureSupported=initMultitexture();
    if (!LoadGLTextures()) return false;					// Jump To Texture Loading Routine
    glEnable(GL_TEXTURE_2D);						// Enable Texture Mapping
    glShadeModel(GL_SMOOTH);						// Enable Smooth Shading
    glClearColor(0.0f, 0.0f, 0.0f, 0.5f);					// Black Background
    glClearDepth(1.0f);							// Depth Buffer Setup
    glEnable(GL_DEPTH_TEST);						// Enables Depth Testing
    glDepthFunc(GL_LEQUAL);							// The Type Of Depth Testing To Do
    glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);			// Really Nice Perspective Calculations

    initLights();								// Initialize OpenGL Light
    return true								// Initialization Went OK
}
Here comes about 95% of the work. All references like "for reasons discussed later" will be solved in the following block of theory.

Begin Theory ( Emboss Bump Mapping )

If you have a Powerpoint-viewer installed, it is highly recommended that you download the following presentation:

"Emboss Bump Mapping" by Michael I. Gold, nVidia Corp. [.ppt, 309K]

For those without Powerpoint-viewer, I’ve tried to convert the information contained in the document to .html-format. Here it comes:

Emboss Bump Mapping

Michael I. Gold

NVidia Corporation

Bump Mapping

Real Bump Mapping Uses Per-Pixel Lighting.
  • Lighting calculation at each pixel based on perturbed normal vectors.
  • Computationally expensive.
  • For more information see: Blinn, J. : Simulation of Wrinkled Surfaces, Computer Graphics. 12,3 (August 1978) 286-292.
  • For information on the web go to: http://www.objectecture.com/ to see Cass Everitt’s Orthogonal Illumination Thesis. (rem.: Jens)
Emboss Bump Mapping

Emboss Bump Mapping Is A Hack
  • Diffuse lighting only, no specular component
  • Under-sampling artefacts (may result in blurry motion, rem.: Jens)
  • Possible on today’s consumer hardware (as shown, rem.: Jens)
  • If it looks good, do it!
Diffuse Lighting Calculation

C=(L*N) x Dl x Dm
  • L is light vector
  • N is normal vector
  • Dl is light diffuse color
  • Dm is material diffuse color
  • Bump Mapping changes N per pixel
  • Emboss Bump Mapping approximates (L*N)
Approximate Diffuse Factor L*N

Texture Map Represents Heightfield
  • [0,1] represents range of bump function
  • First derivate represents slope m (Note that m is only 1D. Imagine m to be the inf.-norm of grad(s,t) to a given set of coordinates (s,t)!, rem.: Jens)
  • m increases / decreases base diffuse factor Fd
  • (Fd+m) approximates (L*N) per pixel
Approximate Derivative

Embossing Approximates Derivative
  • Lookup height H0 at point (s,t)
  • Lookup height H1 at point slightly perturbed toward light source (s+ds,t+dt)
  • Subtract original height H0 from perturbed height H1
  • Difference represents instantaneous slope m=H1-H0
Compute The Bump

1) Original bump (H0).

2) Original bump (H0) overlaid with second bump (H1) slightly perturbed toward light source.

3) Substract original bump from second (H0-H1). This leads to brightened (B) and darkened (D) areas.

Compute The Lighting

Evaluate Fragment Color Cf
  • Cf = (L*N) x Dl x Dm
  • (L*N) ~ (Fd + (H1-H0))
  • Dm x Dl is encoded in surface texture Ct. Could control Dl seperately, if you’re clever. (we control it using OpenGL-Lighting!, rem.: Jens)
  • Cf = (Fd + (H0-H1) x Ct
Is That All? It’s So Easy!

We’re Not Quite Done Yet. We Still Must:
  • Build a texture (using a painting program, rem.: Jens)
  • Calculate texture coordinate offsets (ds,dt)
  • Calculate diffuse Factor Fd (is controlled using OpenGL-Lighting!, rem.: Jens)
  • Both are derived from normal N and light vector L (in our case, only (ds,dt) are calculated explicitly!, rem.: Jens)
  • Now we have to do some math
Building A Texture

Conserve Textures!
  • Current multitexture-hardware only supports two textures! (By now, not true anymore, but nevertheless you should read this!, rem.: Jens)
  • Bump Map in ALPHA channel (not the way we do it, could implement it yourself as an exercise if you have TNT-chipset rem.: Jens)
  • Maximum bump = 1.0
  • Level ground = 0.5
  • Maximum depression = 0.0
  • Surface color in RGB channels
  • Set internal format to GL_RGBA8 !!
Calculate Texture Offsets

Rotate Light Vector Into Normal Space
  • Need Normal coordinate system
  • Derive coordinate system from normal and “up” vector (we pass the texCoord directions to our offset generator explicitly, rem.: Jens)
  • Normal is z-axis
  • Cross-product is x-axis
  • Throw away "up" vector, derive y-axis as cross-product of x- and z-axis
  • Build 3x3 matrix Mn from axes
  • Transform light vector into normal space.(Mn is also called an orthonormal basis. Think of Mn*v as to "express" v in means of a basis describing tangent space rather than in means of the standard basis. Note also that orthonormal bases are invariant against-scaling resulting in no loss of normalization when multiplying vectors! rem.: Jens)
Calculate Texture Offsets (Cont’d)

Use Normal-Space Light Vector For Offsets
  • L’ = Mn x L
  • Use L’x, L’y for (ds,dt)
  • Use L’z for diffuse factor! (Rather not! If you’re no TNT-owner, use OpenGL-Lighting instead, since you have to do one additional pass anyhow!, rem.: Jens)
  • If light vector is near normal, L’x, L’y are small.
  • If light vector is near tangent plane, L’x, L’y are large.
  • What if L’z is less than zero?
  • Light is on opposite side from normal
  • Fade contribution toward zero.
Implementation On TNT

Calculate Vectors, Texcoords On The Host
  • Pass diffuse factor as vertex alpha
  • Could use vertex color for light diffuse color
  • H0 and surface color from texture unit 0
  • H1 from texture unit 1 (same texture, different coordinates)
  • ARB_multitexture extension
  • Combines extension (more precisely: the NVIDIA_multitexture_combiners extension, featured by all TNT-family cards, rem.: Jens)
Implementation on TNT (Cont'd)

Combiner 0 Alpha-Setup:
  • (1-T0a) + T1a - 0.5 (T0a stands for "texture-unit 0, alpha channel", rem.: Jens)
  • (T1a-T0a) maps to (-1,1), but hardware clamps to (0,1)
  • 0.5 bias balances the loss from clamping (consider using 0.5 scale, since you can use a wider variety of bump maps, rem.: Jens)
  • Could modulate light diffuse color with T0c
  • Combiner 0 rgb-setup:
  • (T0c * C0a + T0c * Fda - 0.5 )*2
  • 0.5 bias balances the loss from clamping
  • scale by 2 brightens the image
End Theory ( Emboss Bump Mapping )

Though we’re doing it a little bit different than the TNT-Implementation to enable our program to run on ALL accelerators, we can learn two or three things here. One thing is, that bump mapping is a multi-pass algorithm on most cards (not on TNT-family, where it can be implemented in one 2-texture pass.) You should now be able to imagine how nice multitexturing really is. We’ll now implement a 3-pass non-multitexture algorithm, that can be (and will be) developed into a 2-pass multitexture algorithm.

By now you should be aware, that we’ll have to do some matrix-matrix-multiplication (and matrix-vector-multiplication, too). But that’s nothing to worry about: OpenGL will do the matrix-matrix-multiplication for us (if tweaked right) and the matrix-vector-multiplication is really easy-going: VMatMult(M,v) multiplies matrix M with vector v and stores the result back in v: v:=M*v. All Matrices and vectors passed have to be in homogenous-coordinates resulting in 4x4 matrices and 4-dim vectors. This is to ensure conformity to OpenGL in order to multiply own vectors with OpenGL-matrices right away.
// Calculates v=vM, M Is 4x4 In Column-Major, v Is 4dim. Row (i.e. "Transposed")
void VMatMult(GLfloat *M, GLfloat *v) {
    GLfloat res[3];
    res[0]=M[ 0]*v[0]+M[ 1]*v[1]+M[ 2]*v[2]+M[ 3]*v[3];
    res[1]=M[ 4]*v[0]+M[ 5]*v[1]+M[ 6]*v[2]+M[ 7]*v[3];
    res[2]=M[ 8]*v[0]+M[ 9]*v[1]+M[10]*v[2]+M[11]*v[3];
    v[0]=res[0];
    v[1]=res[1];
    v[2]=res[2];
    v[3]=M[15];								// Homogenous Coordinate
}
Begin Theory ( Emboss Bump Mapping Algorithms )

Here we’ll discuss two different algorithms. I found the first one several days ago under:
http://www.nvidia.com/marketing/Developer/DevRel.nsf/TechnicalDemosFrame?OpenPage

The program is called GL_BUMP and was written by Diego Tártara in 1999.
It implements really nice looking bump mapping, though it has some drawbacks.
But first, lets have a look at Tártara’s Algorithm:

  1. All vectors have to be EITHER in object OR world space
  2. Calculate vector v from current vertex to light position
  3. Normalize v
  4. Project v into tangent space. (This is the plane touching the surface in the current vertex. Typically, if working with flat surfaces, this is the surface itself).
  5. Offset (s,t)-coordinates by the projected v’s x and y component
This looks not bad! It is basically the Algorithm introduced by Michael I. Gold above. But it has a major drawback: Tártara only does the projection for a xy-plane! This is not sufficient for our purposes since it simplifies the projection step to just taking the xy-components of v and discarding the z-component.

But his implementation does the diffuse lighting the same way we’ll do it: by using OpenGL’s built-in lighting. Since we can’t use the combiners-method Gold suggests (we want our programs to run anywhere, not just on TNT-cards!), we can’t store the diffuse factor in the alpha channel. Since we already have a 3-pass non-multitexture / 2-pass multitexture problem, why not apply OpenGL-Lighting to the last pass to do all the ambient light and color stuff for us? This is possible (and looks quite well) only because we have no complex geometry, so keep this in mind. If you’d render several thousands of bump mapped triangles, try to invent something new!

Furthermore, he uses multitexturing, which is, as we shall see, not as easy as you might have thought regarding this special case.

But now to our Implementation. It looks quite the same to the above Algorithm, except for the projection step, where we use an own approach:

  • We use OBJECT COORDINATES, this means we don’t apply the modelview matrix to our calculations. This has a nasty side-effect: since we want to rotate the cube, object-coordinates of the cube don’t change, world-coordinates (also referred to as eye-coordinates) do. But our light-position should not be rotated with the cube, it should be just static, meaning that it’s world-coordinates don’t change. To compensate, we’ll apply a trick commonly used in computer graphics: Instead of transforming each vertex to worldspace in advance to computing the bumps, we’ll just transform the light into object-space by applying the inverse of the modelview-matrix. This is very cheap in this case since we know exactly how the modelview-matrix was built step-by-step, so an inversion can also be done step-by-step. We’ll come back later to that issue.
  • We calculate the current vertex c on our surface (simply by looking it up in data).
  • Then we’ll calculate a normal n with length 1 (We usually know n for each face of a cube!). This is important, since we can save computing time by requesting normalized vectors. Calculate the light vector v from c to the light position l
  • If there’s work to do, build a matrix Mn representing the orthonormal projection. This is done as f
  • Calculate out texture coordinate offset by multiplying the supplied texture-coordinate directions s and t each with v and MAX_EMBOSS: ds = s*v*MAX_EMBOSS, dt=t*v*MAX_EMBOSS. Note that s, t and v are vectors while MAX_EMBOSS isn’t.
  • Add the offset to the texture-coordinates in pass 2.
Why this is good:

  • Fast (only needs one squareroot and a couple of MULs per vertex)!
  • Looks very nice!
  • This works with all surfaces, not just planes.
  • This runs on all accelerators.
  • Is glBegin/glEnd friendly: Does not need any "forbidden" GL-commands.
Drawback:

  • Not fully physical correct.
  • Leaves minor artefacts.

This figure shows where our vectors are located. You can get t and s by simply subtracting adjacent vertices, but be sure to have them point in the right direction and to normalize them. The blue spot marks the vertex where texCoord2f(0.0f,0.0f) is mapped to.

End Theory ( Emboss Bump Mapping Algorithms )

Let’s have a look to texture-coordinate offset generation, first. The function is called SetUpBumps(), since this actually is what it does:
// Sets Up The Texture-Offsets
// n : Normal On Surface. Must Be Of Length 1
// c : Current Vertex On Surface
// l : Lightposition
// s : Direction Of s-Texture-Coordinate In Object Space (Must Be Normalized!)
// t : Direction Of t-Texture-Coordinate In Object Space (Must Be Normalized!)
void SetUpBumps(GLfloat *n, GLfloat *c, GLfloat *l, GLfloat *s, GLfloat *t) {
    GLfloat v[3];								// Vertex From Current Position To Light
    GLfloat lenQ;								// Used To Normalize
    // Calculate v From Current Vertex c To Lightposition And Normalize v
    v[0]=l[0]-c[0];
    v[1]=l[1]-c[1];
    v[2]=l[2]-c[2];
    lenQ=(GLfloat) sqrt(v[0]*v[0]+v[1]*v[1]+v[2]*v[2]);
    v[0]/=lenQ;
    v[1]/=lenQ;
    v[2]/=lenQ;
    // Project v Such That We Get Two Values Along Each Texture-Coordinate Axis
    c[0]=(s[0]*v[0]+s[1]*v[1]+s[2]*v[2])*MAX_EMBOSS;
    c[1]=(t[0]*v[0]+t[1]*v[1]+t[2]*v[2])*MAX_EMBOSS;
Doesn’t look that complicated anymore, eh? But theory is necessary to understand and control this effect. (I learned THAT myself during writing this tutorial).

I always like logos to be displayed while presentational programs are running. We’ll have two of them right now. Since a call to doLogo() resets the GL_MODELVIEW-matrix, this has to be called as final rendering pass.

This function displays two logos: An OpenGL-Logo and a multitexture-Logo, if this feature is enabled. The logos are alpha-blended and are sort of semi-transparent. Since they have an alpha-channel, I blend them using GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA, as suggested by all OpenGL-documentation. Since they are all co-planar, we do not have to z-sort them before. The numbers that are used for the vertices are "empirical" (a.k.a. try-and-error) to place them neatly into the screen edges. We’ll have to enable blending and disable lighting to avoid nasty effects. To ensure they’re in front of all, just reset the GL_MODELVIEW-matrix and set depth-function to GL_ALWAYS.
void doLogo(void) {
    // MUST CALL THIS LAST!!!, Billboards The Two Logos
    glDepthFunc(GL_ALWAYS);
    glBlendFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA);
    glEnable(GL_BLEND);
    glDisable(GL_LIGHTING);
    glLoadIdentity();
    glBindTexture(GL_TEXTURE_2D,glLogo);
    glBegin(GL_QUADS);
        glTexCoord2f(0.0f,0.0f);	glVertex3f(0.23f, -0.4f,-1.0f);
        glTexCoord2f(1.0f,0.0f);	glVertex3f(0.53f, -0.4f,-1.0f);
        glTexCoord2f(1.0f,1.0f);	glVertex3f(0.53f, -0.25f,-1.0f);
        glTexCoord2f(0.0f,1.0f);	glVertex3f(0.23f, -0.25f,-1.0f);
    glEnd();
    if (useMultitexture) {
        glBindTexture(GL_TEXTURE_2D,multiLogo);
        glBegin(GL_QUADS);
            glTexCoord2f(0.0f,0.0f);	glVertex3f(-0.53f, -0.25f,-1.0f);
            glTexCoord2f(1.0f,0.0f);	glVertex3f(-0.33f, -0.25f,-1.0f);
            glTexCoord2f(1.0f,1.0f);	glVertex3f(-0.33f, -0.15f,-1.0f);
            glTexCoord2f(0.0f,1.0f);	glVertex3f(-0.53f, -0.15f,-1.0f);
        glEnd();
    }
}
Here comes the function for doing the bump mapping without multitexturing. It’s a three-pass implementation. As a first step, the GL_MODELVIEW matrix is inverted by applying to the identity-matrix all steps later applied to the GL_MODELVIEW in reverse order and inverted. The result is a matrix that "undoes" the GL_MODELVIEW if applied to an object. We fetch it from OpenGL by simply using glGetFloatv(). Remember that the matrix has to be an array of 16 and that the matrix is "transposed"!

By the way: If you don’t exactly know how the modelview was built, consider using world-space, since matrix-inversion is complicated and costly. But if you’re doing large amounts of vertices inverting the modelview with a more generalized approach could be faster.
bool doMesh1TexelUnits(void) {
    GLfloat c[4]={0.0f,0.0f,0.0f,1.0f};					// Holds Current Vertex
    GLfloat n[4]={0.0f,0.0f,0.0f,1.0f};					// Normalized Normal Of Current Surface
    GLfloat s[4]={0.0f,0.0f,0.0f,1.0f};					// s-Texture Coordinate Direction, Normalized
    GLfloat t[4]={0.0f,0.0f,0.0f,1.0f};					// t-Texture Coordinate Direction, Normalized
    GLfloat l[4];								// Holds Our Lightposition To Be Transformed Into Object Space
    GLfloat Minv[16];							// Holds The Inverted Modelview Matrix To Do So
    int i;

    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);			// Clear The Screen And The Depth Buffer

    // Build Inverse Modelview Matrix First. This Substitutes One Push/Pop With One glLoadIdentity();
    // Simply Build It By Doing All Transformations Negated And In Reverse Order
    glLoadIdentity();
    glRotatef(-yrot,0.0f,1.0f,0.0f);
    glRotatef(-xrot,1.0f,0.0f,0.0f);
    glTranslatef(0.0f,0.0f,-z);
    glGetFloatv(GL_MODELVIEW_MATRIX,Minv);
    glLoadIdentity();
    glTranslatef(0.0f,0.0f,z);
    glRotatef(xrot,1.0f,0.0f,0.0f);
    glRotatef(yrot,0.0f,1.0f,0.0f);

    // Transform The Lightposition Into Object Coordinates:
    l[0]=LightPosition[0];
    l[1]=LightPosition[1];
    l[2]=LightPosition[2];
    l[3]=1.0f;								// Homogenous Coordinate
    VMatMult(Minv,l);
First Pass:
  • Use bump-texture
  • Disable Blending
  • Disable Lighting
  • Use non-offset texture-coordinates
  • Do the geometry
This will render a cube only consisting out of bump map.
    glBindTexture(GL_TEXTURE_2D, bump[filter]);
    glDisable(GL_BLEND);
    glDisable(GL_LIGHTING);
    doCube();
Second Pass:
  • Use inverted bump-texture
  • Enable Blending GL_ONE, GL_ONE
  • Keep Lighting disabled
  • Use offset texture-coordinates (This means that you call SetUpBumps() before each face of the cube
  • Do the geometry
This will render a cube with the correct emboss bump mapping, but without colors.

You could save computing time by just rotating the lightvector into inverted direction. However, this didn’t work out correctly, so we do it the plain way: rotate each normal and center-point the same way we rotate our geometry!
    glBindTexture(GL_TEXTURE_2D,invbump[filter]);
    glBlendFunc(GL_ONE,GL_ONE);
    glDepthFunc(GL_LEQUAL);
    glEnable(GL_BLEND);

    glBegin(GL_QUADS);
        // Front Face
        n[0]=0.0f;
        n[1]=0.0f;
        n[2]=1.0f;
        s[0]=1.0f;
        s[1]=0.0f;
        s[2]=0.0f;
        t[0]=0.0f;
        t[1]=1.0f;
        t[2]=0.0f;
        for (i=0; i<4; i++) {
            c[0]=data[5*i+2];
            c[1]=data[5*i+3];
            c[2]=data[5*i+4];
            SetUpBumps(n,c,l,s,t);
            glTexCoord2f(data[5*i]+c[0], data[5*i+1]+c[1]);
            glVertex3f(data[5*i+2], data[5*i+3], data[5*i+4]);
        }
        // Back Face
        n[0]=0.0f;
        n[1]=0.0f;
        n[2]=-1.0f;
        s[0]=-1.0f;
        s[1]=0.0f;
        s[2]=0.0f;
        t[0]=0.0f;
        t[1]=1.0f;
        t[2]=0.0f;
        for (i=4; i<8; i++) {
            c[0]=data[5*i+2];
            c[1]=data[5*i+3];
            c[2]=data[5*i+4];
            SetUpBumps(n,c,l,s,t);
            glTexCoord2f(data[5*i]+c[0], data[5*i+1]+c[1]);
            glVertex3f(data[5*i+2], data[5*i+3], data[5*i+4]);
        }
        // Top Face
        n[0]=0.0f;
        n[1]=1.0f;
        n[2]=0.0f;
        s[0]=1.0f;
        s[1]=0.0f;
        s[2]=0.0f;
        t[0]=0.0f;
        t[1]=0.0f;
        t[2]=-1.0f;
        for (i=8; i<12; i++) {
            c[0]=data[5*i+2];
            c[1]=data[5*i+3];
            c[2]=data[5*i+4];
            SetUpBumps(n,c,l,s,t);
            glTexCoord2f(data[5*i]+c[0], data[5*i+1]+c[1]);
            glVertex3f(data[5*i+2], data[5*i+3], data[5*i+4]);
        }
        // Bottom Face
        n[0]=0.0f;
        n[1]=-1.0f;
        n[2]=0.0f;
        s[0]=-1.0f;
        s[1]=0.0f;
        s[2]=0.0f;
        t[0]=0.0f;
        t[1]=0.0f;
        t[2]=-1.0f;
        for (i=12; i<16; i++) {
            c[0]=data[5*i+2];
            c[1]=data[5*i+3];
            c[2]=data[5*i+4];
            SetUpBumps(n,c,l,s,t);
            glTexCoord2f(data[5*i]+c[0], data[5*i+1]+c[1]);
            glVertex3f(data[5*i+2], data[5*i+3], data[5*i+4]);
        }
        // Right Face
        n[0]=1.0f;
        n[1]=0.0f;
        n[2]=0.0f;
        s[0]=0.0f;
        s[1]=0.0f;
        s[2]=-1.0f;
        t[0]=0.0f;
        t[1]=1.0f;
        t[2]=0.0f;
        for (i=16; i<20; i++) {
            c[0]=data[5*i+2];
            c[1]=data[5*i+3];
            c[2]=data[5*i+4];
            SetUpBumps(n,c,l,s,t);
            glTexCoord2f(data[5*i]+c[0], data[5*i+1]+c[1]);
            glVertex3f(data[5*i+2], data[5*i+3], data[5*i+4]);
        }
        // Left Face
        n[0]=-1.0f;
        n[1]=0.0f;
        n[2]=0.0f;
        s[0]=0.0f;
        s[1]=0.0f;
        s[2]=1.0f;
        t[0]=0.0f;
        t[1]=1.0f;
        t[2]=0.0f;
        for (i=20; i<24; i++) {
            c[0]=data[5*i+2];
            c[1]=data[5*i+3];
            c[2]=data[5*i+4];
            SetUpBumps(n,c,l,s,t);
            glTexCoord2f(data[5*i]+c[0], data[5*i+1]+c[1]);
            glVertex3f(data[5*i+2], data[5*i+3], data[5*i+4]);
        }
    glEnd();
Third Pass:
  • Use (colored) base-texture
  • Enable Blending GL_DST_COLOR, GL_SRC_COLOR
  • This blending equation multiplies by 2: (Cdst*Csrc)+(Csrc*Cdst)=2(Csrc*Cdst)!
  • Enable Lighting to do the ambient and diffuse stuff
  • Reset GL_TEXTURE-matrix to go back to "normal" texture coordinates
  • Do the geometry
This will finish cube-rendering, complete with lighting. Since we can switch back and forth between multitexturing and non-multitexturing, we have to reset the texture-environment to "normal" GL_MODULATE first. We only do the third pass, if the user doesn’t want to see just the emboss.
    if (!emboss) {
        glTexEnvf (GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
        glBindTexture(GL_TEXTURE_2D,texture[filter]);
        glBlendFunc(GL_DST_COLOR,GL_SRC_COLOR);
        glEnable(GL_LIGHTING);
        doCube();
    }
Last Pass:
  • update geometry (esp. rotations)
  • do the Logos
    xrot+=xspeed;
    yrot+=yspeed;
    if (xrot>360.0f) xrot-=360.0f;
    if (xrot<0.0f) xrot+=360.0f;
    if (yrot>360.0f) yrot-=360.0f;
    if (yrot<0.0f) yrot+=360.0f;

    /* LAST PASS: Do The Logos! */
    doLogo();
    return true;								// Keep Going
}
This function will do the whole mess in 2 passes with multitexturing support. We support two texel-units. More would be extreme complicated due to the blending equations. Better trim to TNT instead. Note that almost the only difference to doMesh1TexelUnits() is, that we send two sets of texture-coordinates for each vertex!
bool doMesh2TexelUnits(void) {
    GLfloat c[4]={0.0f,0.0f,0.0f,1.0f};					// Holds Current Vertex
    GLfloat n[4]={0.0f,0.0f,0.0f,1.0f};					// Normalized Normal Of Current Surface
    GLfloat s[4]={0.0f,0.0f,0.0f,1.0f};					// s-Texture Coordinate Direction, Normalized
    GLfloat t[4]={0.0f,0.0f,0.0f,1.0f};					// t-Texture Coordinate Direction, Normalized
    GLfloat l[4];								// Holds Our Lightposition To Be Transformed Into Object Space
    GLfloat Minv[16];							// Holds The Inverted Modelview Matrix To Do So
    int i;

    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);			// Clear The Screen And The Depth Buffer

    // Build Inverse Modelview Matrix First. This Substitutes One Push/Pop With One glLoadIdentity();
    // Simply Build It By Doing All Transformations Negated And In Reverse Order
    glLoadIdentity();
    glRotatef(-yrot,0.0f,1.0f,0.0f);
    glRotatef(-xrot,1.0f,0.0f,0.0f);
    glTranslatef(0.0f,0.0f,-z);
    glGetFloatv(GL_MODELVIEW_MATRIX,Minv);
    glLoadIdentity();
    glTranslatef(0.0f,0.0f,z);

    glRotatef(xrot,1.0f,0.0f,0.0f);
    glRotatef(yrot,0.0f,1.0f,0.0f);

    // Transform The Lightposition Into Object Coordinates:
    l[0]=LightPosition[0];
    l[1]=LightPosition[1];
    l[2]=LightPosition[2];
    l[3]=1.0f;								// Homogenous Coordinate
    VMatMult(Minv,l);
First Pass:
  • No Blending
  • No Lighting
Set up the texture-combiner 0 to
  • Use bump-texture
  • Use not-offset texture-coordinates
  • Texture-Operation GL_REPLACE, resulting in texture just being drawn
Set up the texture-combiner 1 to
  • Offset texture-coordinates
  • Texture-Operation GL_ADD, which is the multitexture-equivalent to ONE, ONE- blending.
This will render a cube consisting out of the grey-scale erode map.
    // TEXTURE-UNIT #0
    glActiveTextureARB(GL_TEXTURE0_ARB);
    glEnable(GL_TEXTURE_2D);
    glBindTexture(GL_TEXTURE_2D, bump[filter]);
    glTexEnvf (GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_COMBINE_EXT);
    glTexEnvf (GL_TEXTURE_ENV, GL_COMBINE_RGB_EXT, GL_REPLACE);

    // TEXTURE-UNIT #1
    glActiveTextureARB(GL_TEXTURE1_ARB);
    glEnable(GL_TEXTURE_2D);
    glBindTexture(GL_TEXTURE_2D, invbump[filter]);
    glTexEnvf (GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_COMBINE_EXT);
    glTexEnvf (GL_TEXTURE_ENV, GL_COMBINE_RGB_EXT, GL_ADD);

    // General Switches
    glDisable(GL_BLEND);
    glDisable(GL_LIGHTING);
Now just render the faces one by one, as already seen in doMesh1TexelUnits(). Only new thing: Uses glMultiTexCoor2fARB() instead of just glTexCoord2f(). Note that you must specify which texture-unit you mean by the first parameter, which must be GL_TEXTUREi_ARB with i in [0..31]. (What hardware has 32 texture-units? And what for?)
    glBegin(GL_QUADS);
        // Front Face
        n[0]=0.0f;
        n[1]=0.0f;
        n[2]=1.0f;
        s[0]=1.0f;
        s[1]=0.0f;
        s[2]=0.0f;
        t[0]=0.0f;
        t[1]=1.0f;
        t[2]=0.0f;
        for (i=0; i<4; i++) {
            c[0]=data[5*i+2];
            c[1]=data[5*i+3];
            c[2]=data[5*i+4];
            SetUpBumps(n,c,l,s,t);
            glMultiTexCoord2fARB(GL_TEXTURE0_ARB,data[5*i], data[5*i+1]);
            glMultiTexCoord2fARB(GL_TEXTURE1_ARB,data[5*i]+c[0], data[5*i+1]+c[1]);
            glVertex3f(data[5*i+2], data[5*i+3], data[5*i+4]);
        }
        // Back Face
        n[0]=0.0f;
        n[1]=0.0f;
        n[2]=-1.0f;
        s[0]=-1.0f;
        s[1]=0.0f;
        s[2]=0.0f;
        t[0]=0.0f;
        t[1]=1.0f;
        t[2]=0.0f;
        for (i=4; i<8; i++) {
            c[0]=data[5*i+2];
            c[1]=data[5*i+3];
            c[2]=data[5*i+4];
            SetUpBumps(n,c,l,s,t);
            glMultiTexCoord2fARB(GL_TEXTURE0_ARB,data[5*i], data[5*i+1]);
            glMultiTexCoord2fARB(GL_TEXTURE1_ARB,data[5*i]+c[0], data[5*i+1]+c[1]);
            glVertex3f(data[5*i+2], data[5*i+3], data[5*i+4]);
        }
        // Top Face
        n[0]=0.0f;
        n[1]=1.0f;
        n[2]=0.0f;
        s[0]=1.0f;
        s[1]=0.0f;
        s[2]=0.0f;
        t[0]=0.0f;
        t[1]=0.0f;
        t[2]=-1.0f;
        for (i=8; i<12; i++) {
            c[0]=data[5*i+2];
            c[1]=data[5*i+3];
            c[2]=data[5*i+4];
            SetUpBumps(n,c,l,s,t);
            glMultiTexCoord2fARB(GL_TEXTURE0_ARB,data[5*i], data[5*i+1]);
            glMultiTexCoord2fARB(GL_TEXTURE1_ARB,data[5*i]+c[0], data[5*i+1]+c[1]);
            glVertex3f(data[5*i+2], data[5*i+3], data[5*i+4]);
        }
        // Bottom Face
        n[0]=0.0f;
        n[1]=-1.0f;
        n[2]=0.0f;
        s[0]=-1.0f;
        s[1]=0.0f;
        s[2]=0.0f;
        t[0]=0.0f;
        t[1]=0.0f;
        t[2]=-1.0f;
        for (i=12; i<16; i++) {
            c[0]=data[5*i+2];
            c[1]=data[5*i+3];
            c[2]=data[5*i+4];
            SetUpBumps(n,c,l,s,t);
            glMultiTexCoord2fARB(GL_TEXTURE0_ARB,data[5*i], data[5*i+1]);
            glMultiTexCoord2fARB(GL_TEXTURE1_ARB,data[5*i]+c[0], data[5*i+1]+c[1]);
            glVertex3f(data[5*i+2], data[5*i+3], data[5*i+4]);
        }
        // Right Face
        n[0]=1.0f;
        n[1]=0.0f;
        n[2]=0.0f;
        s[0]=0.0f;
        s[1]=0.0f;
        s[2]=-1.0f;
        t[0]=0.0f;
        t[1]=1.0f;
        t[2]=0.0f;
        for (i=16; i<20; i++) {
            c[0]=data[5*i+2];
            c[1]=data[5*i+3];
            c[2]=data[5*i+4];
            SetUpBumps(n,c,l,s,t);
            glMultiTexCoord2fARB(GL_TEXTURE0_ARB,data[5*i], data[5*i+1]);
            glMultiTexCoord2fARB(GL_TEXTURE1_ARB,data[5*i]+c[0], data[5*i+1]+c[1]);
            glVertex3f(data[5*i+2], data[5*i+3], data[5*i+4]);
        }
        // Left Face
        n[0]=-1.0f;
        n[1]=0.0f;
        n[2]=0.0f;
        s[0]=0.0f;
        s[1]=0.0f;
        s[2]=1.0f;
        t[0]=0.0f;
        t[1]=1.0f;
        t[2]=0.0f;
        for (i=20; i<24; i++) {
            c[0]=data[5*i+2];
            c[1]=data[5*i+3];
            c[2]=data[5*i+4];
            SetUpBumps(n,c,l,s,t);
            glMultiTexCoord2fARB(GL_TEXTURE0_ARB,data[5*i], data[5*i+1]);
            glMultiTexCoord2fARB(GL_TEXTURE1_ARB,data[5*i]+c[0], data[5*i+1]+c[1]);
            glVertex3f(data[5*i+2], data[5*i+3], data[5*i+4]);
        }
    glEnd();
Second Pass
  • Use the base-texture
  • Enable Lighting
  • No offset texturre-coordinates => reset GL_TEXTURE-matrix
  • Reset texture environment to GL_MODULATE in order to do OpenGLLighting (doesn’t work otherwise!)
This will render our complete bump-mapped cube.
    glActiveTextureARB(GL_TEXTURE1_ARB);
    glDisable(GL_TEXTURE_2D);
    glActiveTextureARB(GL_TEXTURE0_ARB);
    if (!emboss) {
        glTexEnvf (GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
        glBindTexture(GL_TEXTURE_2D,texture[filter]);
        glBlendFunc(GL_DST_COLOR,GL_SRC_COLOR);
        glEnable(GL_BLEND);
        glEnable(GL_LIGHTING);
        doCube();
    }
Last Pass
  • Update Geometry (esp. rotations)
  • Do The Logos
    xrot+=xspeed;
    yrot+=yspeed;
    if (xrot>360.0f) xrot-=360.0f;
    if (xrot<0.0f) xrot+=360.0f;
    if (yrot>360.0f) yrot-=360.0f;
    if (yrot<0.0f) yrot+=360.0f;

    /* LAST PASS: Do The Logos! */
    doLogo();
    return true;								// Keep Going
}
Finally, a function to render the cube without bump mapping, so that you can see what difference this makes!
bool doMeshNoBumps(void) {
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);			// Clear The Screen And The Depth Buffer
    glLoadIdentity();							// Reset The View
    glTranslatef(0.0f,0.0f,z);

    glRotatef(xrot,1.0f,0.0f,0.0f);
    glRotatef(yrot,0.0f,1.0f,0.0f);

    if (useMultitexture) {
        glActiveTextureARB(GL_TEXTURE1_ARB);
        glDisable(GL_TEXTURE_2D);
        glActiveTextureARB(GL_TEXTURE0_ARB);
    }

    glDisable(GL_BLEND);
    glBindTexture(GL_TEXTURE_2D,texture[filter]);
    glBlendFunc(GL_DST_COLOR,GL_SRC_COLOR);
    glEnable(GL_LIGHTING);
    doCube();

    xrot+=xspeed;
    yrot+=yspeed;
    if (xrot>360.0f) xrot-=360.0f;
    if (xrot<0.0f) xrot+=360.0f;
    if (yrot>360.0f) yrot-=360.0f;
    if (yrot<0.0f) yrot+=360.0f;

    /* LAST PASS: Do The Logos! */
    doLogo();
    return true;								// Keep Going
}
All the drawGLScene() function has to do is to determine which doMesh-function to call:
bool DrawGLScene(GLvoid)							// Here's Where We Do All The Drawing
{
    if (bumps) {
        if (useMultitexture && maxTexelUnits>1)
            return doMesh2TexelUnits();
        else return doMesh1TexelUnits();
    }
    else return doMeshNoBumps();
}
Kills the GLWindow, not modified (thus omitted):
GLvoid KillGLWindow(GLvoid)							// Properly Kill The Window
>…<
Creates the GLWindow, not modified (thus omitted):
BOOL CreateGLWindow(char* title, int width, int height, int bits, bool fullscreenflag)
>…<
Windows main-loop, not modified (thus omitted):
LRESULT CALLBACK WndProc(	HWND hWnd,					// Handle For This Window
                UINT uMsg,					// Message For This Window
                WPARAM wParam,					// Additional Message Information
                LPARAM lParam)					// Additional Message Information
>…<
Windows main-function, added some keys:
  • E: Toggle Emboss / Bumpmapped Mode
  • M: Toggle Multitexturing
  • B: Toggle Bumpmapping. This Is Mutually Exclusive With Emboss Mode
  • F: Toggle Filters. You’ll See Directly That GL_NEAREST Isn’t For Bumpmapping
  • CURSOR-KEYS: Rotate The Cube
int WINAPI WinMain(	HINSTANCE hInstance,					// Instance
            HINSTANCE hPrevInstance,				// Previous Instance
            LPSTR lpCmdLine,					// Command Line Parameters
            int nCmdShow)						// Window Show State
{

    >…<

                if (keys['E'])
                {
                    keys['E']=false;
                    emboss=!emboss;
                }

                if (keys['M'])
                {
                    keys['M']=false;
                    useMultitexture=((!useMultitexture) && multitextureSupported);
                }

                if (keys['B'])
                {
                    keys['B']=false;
                    bumps=!bumps;
                }

                if (keys['F'])
                {
                    keys['F']=false;
                    filter++;
                    filter%=3;
                }

                if (keys[VK_PRIOR])
                {
                    z-=0.02f;
                }

                if (keys[VK_NEXT])
                {
                    z+=0.02f;
                }

                if (keys[VK_UP])
                {
                    xspeed-=0.01f;
                }

                if (keys[VK_DOWN])
                {
                    xspeed+=0.01f;
                }

                if (keys[VK_RIGHT])
                {
                    yspeed+=0.01f;
                }

                if (keys[VK_LEFT])
                {
                    yspeed-=0.01f;
                }
            }
        }
    }
    // Shutdown
    KillGLWindow();								// Kill The Window
    return (msg.wParam);							// Exit The Program
}
Now that you managed this tutorial some words about generating textures and bumpmapped objects before you start to program mighty games and wonder why bumpomapping isn’t that fast or doesn’t look that good:

  • You shouldn’t use textures of 256x256 as done in this lesson. This slows things down a lot. Only do so if demonstrating visual capabilities (like in tutorials).
  • A bumpmapped cube is not usual. A rotated cube far less. The reason for this is the viewing angle: The steeper it gets, the more visual distortion due to filtering you get. Nearly all multipass algorithms are very affected by this. To avoid the need for high-resolution textures, reduce the minimum viewing angle to a sensible value or reduce the bandwidth of viewing angles and pre-filter you texture to perfectly fit that bandwidth.
  • You should first have the colored-texture. The bumpmap can be often derived from it using an average paint-program and converting it to grey-scale.
  • The bumpmap should be "sharper" and higher in contrast than the color-texture. This is usually done by applying a "sharpening filter" to the texture and might look strange at first, but believe me: you can sharpen it A LOT in order to get first class visual appearance.
  • The bumpmap should be centered around 50%-grey (RGB=127,127,127), since this means "no bump at all", brighter values represent ing bumps and lower "scratches". This can be achieved using "histogram" functions in some paint-programs.
  • The bumpmap can be one fourth in size of the color-texture without "killing" visual appearance, though you’ll definitely see the difference.
Now you should at least have a basic understanding of the issued covered in this tutorial. I hope you have enjoyed reading it.

If you have questions and / or suggestions regarding this lesson, you can just mail me, since I have not yet a web page.

This is my current project and will follow soon.

Thanks must go to:

  • Michael I. Gold for his Bump Mapping Documentation
  • Diego Tártara for his example code
  • NVidia for putting great examples on the WWW
  • And last but not least to NeHe who helped me learn a lot about OpenGL.
Jens Schneider


Lesson 23 - Using Direct Input With OpenGL

Lesson 23
Advanced Input with Direct Input and Windows

With the way things are nowadays, you must use the latest technology to compete with games such as Quake and Unreal. In this tutorial, I will teach you how to set up your compiler for Direct Input, how to use it, and how to use the mouse in Opengl w/ Windows. This tutorial is based on code from Lesson 10. So open the Lesson 10 source code and lets get started!

The Mouse

First we need to add in a variable to hold the mouse's X and Y position.
typedef struct tagSECTOR
{
    int numtriangles;
    TRIANGLE* triangle;
} SECTOR;

SECTOR sector1;								// Our Model Goes Here:

POINT mpos;								// Mouse Position ( Add )

LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);			// Declaration For WndProc
Ok, as you can see, we have added in a new variable called mpos. (Mouse Position). mpos has two variables, x and y. We will use these variables to figure out how to rotate the scene. We will modify parts of CreateGLWindow() with the following code.
ShowCursor(FALSE);							// Hide Mouse Pointer ( Modified )
if (fullscreen)								// Are We Still In Fullscreen Mode?
{
    dwExStyle=WS_EX_APPWINDOW;					// Window Extended Style
    dwStyle=WS_POPUP;						// Windows Style
}
Above, we moved the ShowCursor() out of the if statement below it. Therefore, if we go fullscreen or windowed the cursor will never be shown. Now we need to get and set the mouse every time we render. So modify the following in WinMain():
SwapBuffers(hDC);							// Swap Buffers (Double Buffering)
GetCursorPos(&mpos);							// Get The Current Mouse Position ( Add )
SetCursorPos(320,240);							// Set Mouse Position To Center Of The Window ( Add )
heading += (float)(320 - mpos.x)/100 * 5;				// Update The Direction For Movement ( Add )
yrot = heading;								// Update The Y Rotation ( Add )
lookupdown -= (float)(240 - mpos.y)/100 * 5;				// Update The X Rotation ( Add )
Lots to talk about here. First we get the mouse position with GetCursorPos(POINT p). This tells us how much to rotate on the X and Y axis. After we've got the position, we set it up for the next rendering pass using SetCursorPos(int X, int Y).

Note: Do not set the mouse position to 0,0! If you do, you will not be able to move the mouse to the upper left because 0,0 is the upper left of the window. 320 is the middle of the window from left to right and 240 is the middle of the window from the top to the bottom in 640x480 mode. Just a reminder!

After we have taken care of the mouse we need to update some stuff for rendering and movement.

float = (P - CX) / U * S;

P - The point we set the mouse to every time
CX - The current mouse position
U - Units
S - Mouse speed ( being a hardcore quaker I like it at 12 )

We also do this for the heading variable and the lookupdown variable.

There you have it! Mouse code worthy of the greats!

The KeyBoard (DirectX 7)

Now we can look around in our world. The next step is to read multiple keys. By adding this section of code, you will be able to walk forward, strafe, and crouch all at the same time! Enough chit-chat, let's code!

I will now explain the steps required to use DirectX 7. The first step will depend on your compiler. I will show you how to do it with Visual C++, although it shouldn't be much different with other compilers.

  1. First you must download, or order, the DirectX 7 Sdk ( 128 MB ).
    You can download or order by clicking here
    Or click here to download the necessary library and include files locally ( 1.32 MB ).
    Make sure you have DX7 installed on your computer.

  2. Next you must install the sdk or necessary on your computer. If you are using the dx7.zip file from this site, all you have to do is unzip the file, and move all of the include files into your Visual C++ include directory, and all of the library files into your Visual C++ library directory. The Visual C++ directories can usually be found at C:\Program Files\Microsoft Visual Studio\VC98. If you are not using Visual Studio, look for a directory called Visual C. Hopefully by now you know where the library files are, and where the include files are.

  3. After you have installed the required files, open your project and go to Project->Settings.

  4. Click on the Link tab, and move down to Object / Library Modules.

  5. Type in the following at the beginning of the line, dinput.lib dxguid.lib winmm.lib. This links the Direct Input library, the DirectX GUI library, and the Windows Multimedia library (required for timing code) into our program.

    Now we have Direct Input setup for compiling in our project. Time for some coding!

    We need to include the Direct Input header file so that we can use some of its functions. Also, we need to add in Direct Input and the Direct Input Keyboard Device.
#include <stdio.h>							// Header File For Standard Input/Output
#include <gl\gl.h>							// Header File For The OpenGL32 Library
#include <gl\glu.h>							// Header File For The GLu32 Library
#include <gl\glaux.h>							// Header File For The Glaux Library
#include <dinput.h>							// Direct Input Functions	( Add )

LPDIRECTINPUT7		g_DI;						// Direct Input			( Add )
LPDIRECTINPUTDEVICE7	g_KDIDev;					// Keyboard Device		( Add )
The last two lines above set up Direct Input ( g_DI ) and the the keyboard device ( g_KDIDev ). The keyboard device receives the input and we translate and use it. Direct Input is not too far off from regular windows input as seen in the previous tutorials.

Windows Direct Input
VK_LEFT DIK_LEFT
VK_RIGHT DIK_RIGHT
...etc

Basically all we do is change VK to DIK. Although I think that some keys have changed.

Now we need to add a new function to setup Direct Input and the keyboard device. Underneath CreateGLWindow(), add the following:
// Initializes Direct Input ( Add )
int DI_Init()
{
    // Create Direct Input
    if ( DirectInputCreateEx(	hInstance,			// Window Instance
                    DIRECTINPUT_VERSION,		// Direct Input Version
                    IID_IDirectInput7,		// Version 7
                    (void**)&g_DI,			// Direct Input
                    NULL ) )			// NULL Parameter
    {
        return(false);						// Couldn't Initialize Direct Input
    }

    // Create The Keyboard Device
    if ( g_DI->CreateDeviceEx(	GUID_SysKeyboard,		// Define Which Device Tto Create (KeyBoard,Mouse,or Joystick)
                    IID_IDirectInputDevice7,	// Version 7
                    (void**)&g_KDIDev,		// KeyBoard Device
                    NULL ) )			// NULL Parameter
    {
        return(false);						// Couldn't Create The Keyboard Device
    }

    // Set The Keyboard Data Format
    if ( g_KDIDev->SetDataFormat(&c_dfDIKeyboard) )
    {
        return(false);						// Could Not Set The Data Format
    }

    // Set The Cooperative Level
    if ( g_KDIDev->SetCooperativeLevel(hWnd, DISCL_FOREGROUND | DISCL_EXCLUSIVE) )
    {
        return(false);						// Could Not Set The Cooperative Level
    }

    if (g_KDIDev)							// Did We Create The Keyboard Device?
        g_KDIDev->Acquire();					// If So, Acquire It
    else								// If Not
        return(false);						// Return False

    return(true);							// Everything Ok, Return True
}

// Destroys DX ( Add )
void DX_End()
{
    if (g_DI)
    {
        if (g_KDIDev)
        {
            g_KDIDev->Unacquire();
            g_KDIDev->Release();
            g_KDIDev = NULL;
        }

        g_DI->Release();
        g_DI = NULL;
    }
}
I think the code above is pretty self explanatory. First we init Direct Input, then we create the Keyboard device, and finally we acquire it. Later on, I might talk about how you can also use the Mouse and Joystick with Direct Input ( although I don't suggest using Direct Input for the mouse ).

Now we need to change the code from Window's Input to Direct Input. Which means a whole lot of modifying! So, here we go!
In WndProc() The Following Code Was Removed

        case WM_KEYDOWN:					// Is A Key Being Held Down?
        {
            keys[wParam] = TRUE;				// If So, Mark It As TRUE
            return 0;					// Jump Back
        }

        case WM_KEYUP:						// Has A Key Been Released?
        {
            keys[wParam] = FALSE;				// If So, Mark It As FALSE
            return 0;					// Jump Back
        }

At The Top Of The Program, Make The Following Changes

BYTE	buffer[256];							// New Key Buffer, Replaces Keys[] ( Modified )
bool	active=TRUE;							// Window Active Flag Set To TRUE By Default
bool	fullscreen=TRUE;						// Fullscreen Flag Set To Fullscreen Mode By Default
bool	blend;								// Blending ON/OFF
bool	bp;								// Blend Button Pressed?
bool	fp;								// F1 Key Pressed? ( Modified )

...

GLfloat	lookupdown = 0.0f;
GLfloat	z=0.0f;								// Depth Into The Screen
GLuint	filter;								// Which Filter To Use ( Removed )

GLuint texture[5];							// Storage For 5 Textures ( Modified )

In The WinMain() Function

    // Create Our OpenGL Window
    if (!CreateGLWindow("Justin Eslinger's & NeHe's Advanced DirectInput Tutorial",640,480,16,fullscreen))	( Modified )
    {
        return 0;						// Quit If Window Was Not Created
    }

    if (!DI_Init())							// Initialize DirectInput ( Add )
    {
        return 0;
    }

    ...

            // Draw The Scene. Watch For ESC Key And Quit Messages From DrawGLScene()
            if ((active && !DrawGLScene()))			// Active? Was There A Quit Received? ( Modified )

            ...

                HRESULT hr = g_KDIDev->GetDeviceState(sizeof(buffer), &buffer);	// Get The Keys That Have Been Pressed ( Add )

                if ( buffer[DIK_ESCAPE] & 0x80 )	// Check For Escape Key ( Modified )
                {
                    done=TRUE;
                }

                if ( buffer[DIK_B] & 0x80)		// B Key Being Pressed? ( Modified )
                {
                    if (!bp)
                    {
                        bp = true;		// Is The Blend Button Down? ( Add )
                        blend=!blend;
                        if (!blend)
                        {
                            glDisable(GL_BLEND);
                            glEnable(GL_DEPTH_TEST);
                        }
                        else
                        {
                            glEnable(GL_BLEND);
                            glDisable(GL_DEPTH_TEST);
                        }
                    }
                }
                else
                {
                    bp = false;
                }

                if ( buffer[DIK_PRIOR] & 0x80 )		// Page Up? ( Modified )
                {
                    z-=0.02f;
                }

                if ( buffer[DIK_NEXT] & 0x80 )		// Page Down? ( Modified )
                {
                    z+=0.02f;
                }

                if ( buffer[DIK_UP] & 0x80 )		// Up Arrow? ( Modified )
                {
                    xpos -= (float)sin(heading*piover180) * 0.05f;
                    zpos -= (float)cos(heading*piover180) * 0.05f;
                    if (walkbiasangle >= 359.0f)
                    {
                        walkbiasangle = 0.0f;
                    }
                    else
                    {
                        walkbiasangle+= 10;
                    }

                    walkbias = (float)sin(walkbiasangle * piover180)/20.0f;
                }

                if ( buffer[DIK_DOWN] & 0x80 )		// Down Arrow? ( Modified )
                {
                    xpos += (float)sin(heading*piover180) * 0.05f;
                    zpos += (float)cos(heading*piover180) * 0.05f;
                    if (walkbiasangle <= 1.0f)
                    {
                        walkbiasangle = 359.0f;
                    }
                    else
                    {
                        walkbiasangle-= 10;
                    }

                    walkbias = (float)sin(walkbiasangle * piover180)/20.0f;
                }

                if ( buffer[DIK_LEFT] & 0x80 )		// Left Arrow? ( Modified )
                {
                    xpos += (float)sin((heading - 90)*piover180) * 0.05f;	( Modified )
                    zpos += (float)cos((heading - 90)*piover180) * 0.05f;	( Modified )
                    if (walkbiasangle <= 1.0f)
                    {
                        walkbiasangle = 359.0f;
                    }
                    else
                    {
                        walkbiasangle-= 10;
                    }

                    walkbias = (float)sin(walkbiasangle * piover180)/20.0f;
                }

                if ( buffer[DIK_RIGHT] & 0x80 )		// Right Arrow? ( Modified )
                {
                    xpos += (float)sin((heading + 90)*piover180) * 0.05f;	( Modified )
                    zpos += (float)cos((heading + 90)*piover180) * 0.05f;	( Modified )
                    if (walkbiasangle <= 1.0f)
                    {
                        walkbiasangle = 359.0f;
                    }
                    else
                    {
                        walkbiasangle-= 10;
                    }

                    walkbias = (float)sin(walkbiasangle * piover180)/20.0f;
                }

                if ( buffer[DIK_F1] & 0x80)		// Is F1 Being Pressed? ( Modified )
                {
                    if (!fp)			// If F1 Isn't Being "Held" ( Add )
                    {
                        fp = true;		// Is The F1 Button Down? ( Add )
                        KillGLWindow();		// Kill Our Current Window ( Modified )
                        fullscreen=!fullscreen;	// Toggle Fullscreen/Windowed Mode ( Modified )

                        // Recreate Our OpenGL Window
                        if (!CreateGLWindow("Justin Eslinger's & NeHe's Advanced Direct Input Tutorial",640,480,16,fullscreen))	( Modified )
                        {
                            return 0;	// Quit If Window Was Not Created ( Modified )
                        }

                        if (!DI_Init())		// ReInitialize DirectInput ( Add )
                        {
                            return 0;	// Couldn't Initialize, Quit
                        }
                    }
                }
                else
                {
                    fp = false;			// Set 'fp' To False
                }
            }
        }
    }

    // Shutdown
    DX_End();							// Destroys DirectX ( Add )
    KillGLWindow();							// Kill The Window
    return (msg.wParam);						// Exit The Program
}

In DrawGLScene() Modify From The First Line Below

    glTranslatef(xtrans, ytrans, ztrans);
    numtriangles = sector1.numtriangles;

    // Process Each Triangle
    for (int loop_m = 0; loop_m < numtriangles; loop_m++)
    {
        glBindTexture(GL_TEXTURE_2D, texture[sector1.triangle[loop_m].texture]);	( Modified )

        glBegin(GL_TRIANGLES);
Ok, I need to discuss some things here. First, I took out some stuff that we didn't need. Then I replaced the old Windows keyboard stuff. I also changed the left and right keys. Now, when you go left or right, it strafes instead of turns! All I did was add or minus 90 degrees from the heading direction! That's pretty much it! Everything else is commented. Now we can compile and run our game! Whoohooo! hehehe

Now we have Direct Input and Mouse support in our game, what next? Well, we need to add in a timing system to regulate the speed in our game. Without timing, we check the input every frame and that could make us zip through the level before we can even look at it! So let's get started!

First we need adjustment variables to slow down our game and a timer structure.
POINT	mpos;								// Mouse Position
int	adjust = 5;							// Speed Adjustment ( Add )

// Create A Structure For The Timer Information ( Add )
struct
{
    __int64		frequency;					// Timer Frequency
    float		resolution;					// Timer Resolution
    unsigned long	mm_timer_start;					// Multimedia Timer Start Value
    unsigned long	mm_timer_elapsed;				// Multimedia Timer Elapsed Time
    bool		performance_timer;				// Using The Performance Timer?
    __int64		performance_timer_start;			// Performance Timer Start Value
    __int64		performance_timer_elapsed;			// Performance Timer Elapsed Time
} timer;								// Structure Is Named Timer

LRESULT CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);			// Declaration For WndProc
The above code was discussed in lesson 21 so I shouldn't have to explain it.

Just below the declaration for the wndproc(), we need to add in the timer functions.
// Initialize Our Timer (Get It Ready) ( Add )
void TimerInit(void)
{
    memset(&timer, 0, sizeof(timer));				// Clear Our Timer Structure
    // Check To See If A Performance Counter Is Available
    // If One Is Available The Timer Frequency Will Be Updated
    if (!QueryPerformanceFrequency((LARGE_INTEGER *) &timer.frequency))
    {
        // No Performace Counter Available
        timer.performance_timer = FALSE;			// Set Performance Timer To FALSE
        timer.mm_timer_start = timeGetTime();			// Use timeGetTime() To Get Current Time
        timer.resolution = 1.0f/1000.0f;			// Set Our Timer Resolution To .001f
        timer.frequency = 1000;					// Set Our Timer Frequency To 1000
        timer.mm_timer_elapsed = timer.mm_timer_start;		// Set The Elapsed Time To The Current Time
    }
    else
    {
        // Performance Counter Is Available, Use It Instead Of The Multimedia Timer
        // Get The Current Time And Store It In performance_timer_start
        QueryPerformanceCounter((LARGE_INTEGER *) &timer.performance_timer_start);
        timer.performance_timer = TRUE;				// Set Performance Timer To TRUE

        // Calculate The Timer Resolution Using The Timer Frequency
        timer.resolution = (float) (((double)1.0f)/((double)timer.frequency));
        // Set The Elapsed Time To The Current Time
        timer.performance_timer_elapsed = timer.performance_timer_start;
    }
}

// Get Time In Milliseconds ( Add )
float TimerGetTime()
{
    __int64 time;							// time Will Hold A 64 Bit Integer
    if (timer.performance_timer)					// Are We Using The Performance Timer?
    {
        QueryPerformanceCounter((LARGE_INTEGER *) &time);	// Grab The Current Performance Time

        // Return The Current Time Minus The Start Time Multiplied By The Resolution And 1000 (To Get MS)
        return ( (float) ( time - timer.performance_timer_start) * timer.resolution)*1000.0f;
    }
    else
    {
        // Return The Current Time Minus The Start Time Multiplied By The Resolution And 1000 (To Get MS)
        return( (float) ( timeGetTime() - timer.mm_timer_start) * timer.resolution)*1000.0f;
    }
}
The above was also in Lesson 21 so nothing to explain here. Just make sure you add the winmm.lib library file. Otherwise you will get errors when you compile.

Now we must add some stuff in the WinMain() function.
    if (!DI_Init())							// Initialize DirectInput  ( Add )
    {
        return 0;
    }

    TimerInit();							// Init Our Timer  ( Add )

    ...

            float start=TimerGetTime();
            // Grab Timer Value Before We Draw  ( Add )

            // Draw The Scene.  Watch For ESC Key And Quit Messages From DrawGLScene()
            if ((active && !DrawGLScene()))			// Active?  Was There A Quit Received?  ( Modified )
            {
                done=TRUE;				// ESC or DrawGLScene Signalled A Quit
            }
            else						// Not Time To Quit, Update Screen
            {
                while(TimerGetTime()<start+float(adjust*2.0f)) {}	// Waste Cycles On Fast Systems ( Add )
Now the game will run at the adjusted speed. The following segment will be dedicated to some graphical adjustments I made to the Lesson 10 Level.

If you've already downloaded the code for this lesson, then you've already seen that I've added multiple textures to the scene. The new textures are in the DATA directory. Here's how I added the textures:
Modify the tagTriangle structure

typedef struct tagTRIANGLE
{
    int	texture;	( Add )
    VERTEX	vertex[3];
} TRIANGLE;

Modify the SetupWorld code

for (int loop = 0; loop < numtriangles; loop++)
{
    readstr(filein,oneline);	( Add )
    sscanf(oneline, "%i\n", &sector1.triangle[loop].texture);	( Add )
    for (int vert = 0; vert < 3; vert++)
    {

Modify the DrawGLScene code

// Process Each Triangle
    for (int loop_m = 0; loop_m < numtriangles; loop_m++)
    {
        glBindTexture(GL_TEXTURE_2D, texture[sector1.triangle[loop_m].texture]);	( Modified )

        glBegin(GL_TRIANGLES);

In the LoadGLTextures Code We Add More Textures

int LoadGLTextures()							// Load Bitmaps And Convert To Textures
{
    int Status=FALSE;						// Status Indicator
    AUX_RGBImageRec *TextureImage[5];				// Create Storage Space For The Textures
    memset(TextureImage,0,sizeof(void *)*2);			// Set The Pointer To NULL
    if (	(TextureImage[0]=LoadBMP("Data/floor1.bmp")) &&		// Load The Floor Texture
        (TextureImage[1]=LoadBMP("Data/light1.bmp")) &&		// Load The Light Texture
        (TextureImage[2]=LoadBMP("Data/rustyblue.bmp")) &&	// Load the Wall Texture
        (TextureImage[3]=LoadBMP("Data/crate.bmp")) &&		// Load The Crate Texture
        (TextureImage[4]=LoadBMP("Data/weirdbrick.bmp")))	// Load the Ceiling Texture
    {
        Status=TRUE;						// Set The Status To TRUE
        glGenTextures(5, &texture[0]);				// Create The Texture
        for (int loop1=0; loop1<5; loop1++)			// Loop Through 5 Textures
        {
            glBindTexture(GL_TEXTURE_2D, texture[loop1]);
            glTexImage2D(GL_TEXTURE_2D, 0, 3, TextureImage[loop1]->sizeX, TextureImage[loop1]->sizeY, 0,
                GL_RGB, GL_UNSIGNED_BYTE, TextureImage[loop1]->data);
            glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
            glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
        }
        for (loop1=0; loop1<5; loop1++)				// Loop Through 5 Textures
        {
            if (TextureImage[loop1])			// If Texture Exists
            {
                if (TextureImage[loop1]->data)		// If Texture Image Exists
                {
                    free(TextureImage[loop1]->data);// Free The Texture Image Memory
                }
                free(TextureImage[loop1]);		// Free The Image Structure
            }
        }
    }
    return Status;							// Return The Status
}
So now you're able to harness the awesome power of Direct Input. I spent a lot of time writing and revising this tutorial to make it very easy to understand and also error free. I hope this tutorial is helpful to those that wanted to learn this. I felt that since this site gave me enough knowledge to create the engine I have now, that I should give back to the community. Thanks for taking the time to read this!

Justin Eslinger (BlackScar)

blackscar@ticz.com
http://members.xoom.com/Blackscar/


Lesson 23 - Sphere Mapping Quadratics In OpenGL

Lesson 24
Sphere Environment Mapping is a quick way to add a reflection to a metallic or reflective object in your scene. Although it is not as accurate as real life or as a Cube Environment Map, it is a whole lot faster! We'll be using the code from lesson eighteen (Quadratics) for the base of this tutorial. Also we're not using any of the same texture maps, we're going to use one sphere map, and one background image.

Before we start... The "red book" defines a Sphere map as a picture of the scene on a metal ball from infinite distance away and infinite focal point. Well that is impossible to do in real life. The best way I have found to create a good sphere map image without using a Fish eye lens is to use Adobe's Photoshop program.

Creating a Sphere Map In Photoshop:

First you will need a picture of the environment you want to map onto the sphere. Open the picture in Adobe Photoshop and select the entire image. Copy the image and create a new PSD (Photoshop Format) the new image should be the same size as the image we just copied. Paste a copy of the image into the new window we've created. The reason we make a copy is so Photoshop can apply its filters. Instead of copying the image you can select mode from the drop down menu and choose RGB mode. All of the filters should then be available.

Next we need to resize the image so that the image dimensions are a power of 2. Remember that in order to use an image as a texture the image needs to be 128x128, 256x256, etc. Under the image menu, select image size, uncheck the constraint proportions checkbox, and resize the image to a valid texture size. If your image is 100X90, it's better to make the image 128x128 than 64x64. Making the image smaller will lose alot of detail.

The last thing we do is select the filter menu, select distort and apply a spherize modifier. You should see that the center of the picture is blown up like a balloon, now in normal sphere maps the outer area will be blackened out, but it doesn't really matter. Save a copy of the image as a .BMP and you're ready to code!

We don't add any new global variables this time but we do modify the texture array to hold 6 textures.
GLuint	texture[6];								// Storage For 6 Textures ( MODIFIED )
The next thing I did was modify the LoadGLTextures() function so we can load in 2 bitmaps and create 3 filters. (Like we did in the original texturing tutorials). Basically we loop through twice and create 3 textures each time using a different filtering mode. Almost all of this code is new or modified.
int LoadGLTextures()								// Load Bitmaps And Convert To Textures
{
    int Status=FALSE;							// Status Indicator

    AUX_RGBImageRec *TextureImage[2];					// Create Storage Space For The Texture

    memset(TextureImage,0,sizeof(void *)*2);  		         	// Set The Pointer To NULL

    // Load The Bitmap, Check For Errors, If Bitmap's Not Found Quit
    if ((TextureImage[0]=LoadBMP("Data/BG.bmp")) &&				// Background Texture
        (TextureImage[1]=LoadBMP("Data/Reflect.bmp")))			// Reflection Texture (Spheremap)
    {
        Status=TRUE;							// Set The Status To TRUE

        glGenTextures(6, &texture[0]);					// Create Three Textures

        for (int loop=0; loop<=1; loop++)
        {
            // Create Nearest Filtered Texture
            glBindTexture(GL_TEXTURE_2D, texture[loop]);		// Gen Tex 0 And 1
            glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_NEAREST);
            glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_NEAREST);
            glTexImage2D(GL_TEXTURE_2D, 0, 3, TextureImage[loop]->sizeX, TextureImage[loop]->sizeY, 0, GL_RGB, GL_UNSIGNED_BYTE, TextureImage[loop]->data);

            // Create Linear Filtered Texture
            glBindTexture(GL_TEXTURE_2D, texture[loop+2]);		// Gen Tex 2, 3 And 4
            glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
            glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
            glTexImage2D(GL_TEXTURE_2D, 0, 3, TextureImage[loop]->sizeX, TextureImage[loop]->sizeY, 0, GL_RGB, GL_UNSIGNED_BYTE, TextureImage[loop]->data);

            // Create MipMapped Texture
            glBindTexture(GL_TEXTURE_2D, texture[loop+4]);		// Gen Tex 4 and 5
            glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
            glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR_MIPMAP_NEAREST);
            gluBuild2DMipmaps(GL_TEXTURE_2D, 3, TextureImage[loop]->sizeX, TextureImage[loop]->sizeY, GL_RGB, GL_UNSIGNED_BYTE, TextureImage[loop]->data);
        }
        for (loop=0; loop<=1; loop++)
        {
            if (TextureImage[loop])						// If Texture Exists
            {
                    if (TextureImage[loop]->data)			// If Texture Image Exists
                    {
                            free(TextureImage[loop]->data);	// Free The Texture Image Memory
                    }
                    free(TextureImage[loop]);		// Free The Image Structure
            }
        }
    }

    return Status;								// Return The Status
}
We'll modify the cube drawing code a little. Instead of using 1.0 and -1.0 for the normal values, we'll use 0.5 and -0.5. By changing the value of the normal, you can zoom the reflection map in and out. If the normal value is high, the image being reflected will be bigger, and may appear blocky. By reducing the normal value to 0.5 and -0.5 the reflected image is zoomed out a bit so that the image reflecting off the cube isn't all blocky looking. Setting the normal value too low will create undesirable results.
GLvoid glDrawCube()
{
        glBegin(GL_QUADS);
        // Front Face
        glNormal3f( 0.0f, 0.0f, 0.5f);					( Modified )
        glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f, -1.0f,  1.0f);
        glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f, -1.0f,  1.0f);
        glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f,  1.0f,  1.0f);
        glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f,  1.0f,  1.0f);
        // Back Face
        glNormal3f( 0.0f, 0.0f,-0.5f);					( Modified )
        glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f, -1.0f);
        glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f,  1.0f, -1.0f);
        glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f,  1.0f, -1.0f);
        glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f, -1.0f);
        // Top Face
        glNormal3f( 0.0f, 0.5f, 0.0f);					( Modified )
        glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f,  1.0f, -1.0f);
        glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f,  1.0f,  1.0f);
        glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f,  1.0f,  1.0f);
        glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f,  1.0f, -1.0f);
        // Bottom Face
        glNormal3f( 0.0f,-0.5f, 0.0f);					( Modified )
        glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f, -1.0f, -1.0f);
        glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f, -1.0f, -1.0f);
        glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f,  1.0f);
        glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f,  1.0f);
        // Right Face
        glNormal3f( 0.5f, 0.0f, 0.0f);					( Modified )
        glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f, -1.0f, -1.0f);
        glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f,  1.0f, -1.0f);
        glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f,  1.0f,  1.0f);
        glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f,  1.0f);
        // Left Face
        glNormal3f(-0.5f, 0.0f, 0.0f);					( Modified )
        glTexCoord2f(0.0f, 0.0f); glVertex3f(-1.0f, -1.0f, -1.0f);
        glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f,  1.0f);
        glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f,  1.0f,  1.0f);
        glTexCoord2f(0.0f, 1.0f); glVertex3f(-1.0f,  1.0f, -1.0f);
    glEnd();
}
Now in InitGL we add two new function calls, these two calls set the texture generation mode for S and T to Sphere Mapping. The texture coordinates S, T, R & Q relate in a way to object coordinates x, y, z and w. If you are using a one-dimensional texture (1D) you will use the S coordinate. If your texture is two dimensional, you will use the S & T coordinates.

So what the following code does is tells OpenGL how to automatically generate the S and T coordinates for us based on the sphere-mapping formula. The R and Q coordinates are usually ignored. The Q coordinate can be used for advanced texture mapping extensions, and the R coordinate may become useful once 3D texture mapping has been added to OpenGL, but for now we will ignore the R & Q Coords. The S coordinate runs horizontally across the face of our polygon, the T coordinate runs vertically across the face of our polygon.
    glTexGeni(GL_S, GL_TEXTURE_GEN_MODE, GL_SPHERE_MAP);			// Set The Texture Generation Mode For S To Sphere Mapping ( NEW )
    glTexGeni(GL_T, GL_TEXTURE_GEN_MODE, GL_SPHERE_MAP);			// Set The Texture Generation Mode For T To Sphere Mapping ( NEW )
We're almost done! All we have to do is set up the rendering, I took out a few of the quadratic objects because they didn't work well with environment mapping. The first thing we need to do is enable texture generation. Then we select the reflective texture (sphere map) and draw our object. After all of the objects you want sphere-mapped have been drawn, you will want to disable texture generation, otherwise everything will be sphere mapped. We disable sphere-mapping before we draw the background scene (we don't want the background sphere mapped). You will notice that the bind texture commands may look fairly complex. All we're doing is selecting the filter to use when drawing our sphere map or the background image.
int DrawGLScene(GLvoid)								// Here's Where We Do All The Drawing
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);			// Clear The Screen And The Depth Buffer
    glLoadIdentity();							// Reset The View

    glTranslatef(0.0f,0.0f,z);

    glEnable(GL_TEXTURE_GEN_S);						// Enable Texture Coord Generation For S ( NEW )
    glEnable(GL_TEXTURE_GEN_T);						// Enable Texture Coord Generation For T ( NEW )

    glBindTexture(GL_TEXTURE_2D, texture[filter+(filter+1)]);		// This Will Select A Sphere Map ( MODIFIED )
    glPushMatrix();
    glRotatef(xrot,1.0f,0.0f,0.0f);
    glRotatef(yrot,0.0f,1.0f,0.0f);
    switch(object)
    {
    case 0:
        glDrawCube();
        break;
    case 1:
        glTranslatef(0.0f,0.0f,-1.5f);					// Center The Cylinder
        gluCylinder(quadratic,1.0f,1.0f,3.0f,32,32);			// A Cylinder With A Radius Of 0.5 And A Height Of 2
        break;
    case 2:
        gluSphere(quadratic,1.3f,32,32);				// Sphere With A Radius Of 1 And 16 Longitude/Latitude Segments
        break;
    case 3:
        glTranslatef(0.0f,0.0f,-1.5f);					// Center The Cone
        gluCylinder(quadratic,1.0f,0.0f,3.0f,32,32);			// Cone With A Bottom Radius Of .5 And Height Of 2
        break;
    };

    glPopMatrix();
    glDisable(GL_TEXTURE_GEN_S);						// Disable Texture Coord Generation ( NEW )
    glDisable(GL_TEXTURE_GEN_T);						// Disable Texture Coord Generation ( NEW )

    glBindTexture(GL_TEXTURE_2D, texture[filter*2]);			// This Will Select The BG Texture ( NEW )
    glPushMatrix();
        glTranslatef(0.0f, 0.0f, -24.0f);
        glBegin(GL_QUADS);
            glNormal3f( 0.0f, 0.0f, 1.0f);
            glTexCoord2f(0.0f, 0.0f); glVertex3f(-13.3f, -10.0f,  10.0f);
            glTexCoord2f(1.0f, 0.0f); glVertex3f( 13.3f, -10.0f,  10.0f);
            glTexCoord2f(1.0f, 1.0f); glVertex3f( 13.3f,  10.0f,  10.0f);
            glTexCoord2f(0.0f, 1.0f); glVertex3f(-13.3f,  10.0f,  10.0f);
        glEnd();

    glPopMatrix();

    xrot+=xspeed;
    yrot+=yspeed;
    return TRUE;								// Keep Going
}
The last thing we have to do is update the spacebar section of code to reflect (No Pun Intended) the changes we made to the Quadratic objects being rendered. (We removed the discs)
                if (keys[' '] && !sp)
                {
                    sp=TRUE;
                    object++;
                    if(object>3)
                        object=0;
                }
We're done! Now you can do some really impressive things with Environment mapping like making an almost accurate reflection of a room! I was planning on showing how to do Cube Environment Mapping in this tutorial too but my current video card does not support cube mapping. Maybe in a month or so after I buy a GeForce 2 :) Also I taught myself environment mapping (mostly because I couldnt find too much information on it) so if anything in this tutorial is inaccurate, Email Me or let NeHe know.

Thanks, and Good Luck!

GB Schmick (TipTup)

tiptup@net4tv.com


Jeff Molofee's OpenGL Windows Tutorial #25

Lesson 25
This tutorial is far from visually stunning, but you will definitely learn a few new things by reading through it. I have had quite a few people ask me about extensions, and how to find out what extensions are supported on a particular brand of video card. This tutorial will teach you how to find out what OpenGL extensions are supported on any type of 3D video card.

I will also teach you how to scroll a portion of the screen without affecting any of the graphics around it using scissor testing. You will also learn how to draw line strips, and most importantly, in this tutorial we will drop the AUX library completely, along with Bitmap images. I will show you how to use Targa (TGA) images as textures. Not only are Targa files easy to work with and create, they support the ALPHA channel, which will allow you to create some pretty cool effects in future projects!

The first thing you should notice in the code below is that we no longer include the glaux header file (glaux.h). It is also important to note that the glaux.lib file can also be left out! We're not working with bitmaps anymore, so there's no need to include either of these files in our project.

Also, using glaux, I always received one warning message. Without glaux there should be zero errors, zero warnings.
#include	<windows.h>								// Header File For Windows
#include	<stdio.h>								// Header File For Standard Input / Output
#include	<stdarg.h>								// Header File For Variable Argument Routines
#include	<string.h>								// Header File For String Management
#include	<gl\gl.h>								// Header File For The OpenGL32 Library
#include	<gl\glu.h>								// Header File For The GLu32 Library

HDC		hDC=NULL;								// Private GDI Device Context
HGLRC		hRC=NULL;								// Permanent Rendering Context
HWND		hWnd=NULL;								// Holds Our Window Handle
HINSTANCE	hInstance;								// Holds The Instance Of The Application

bool		keys[256];								// Array Used For The Keyboard Routine
bool		active=TRUE;								// Window Active Flag Set To TRUE By Default
bool		fullscreen=TRUE;							// Fullscreen Flag Set To Fullscreen Mode By Default
The first thing we need to do is add some variables. The first variable scroll will be used to scroll a portion of the screen up and down. The second variable maxtokens will be used to keep track of how many tokens (extensions) are supported by the video card.

base is used to hold the font display list.

swidth and sheight are used to grab the current window size. We use these two variable to help us calculate the scissor coordinates later in the code.
int		scroll;									// Used For Scrolling The Screen
int		maxtokens;								// Keeps Track Of The Number Of Extensions Supported
int		swidth;									// Scissor Width
int		sheight;								// Scissor Height

GLuint		base;									// Base Display List For The Font
Now we create a structure to hold the TGA information once we load it in. The first variable imageData will hold a pointer to the data that makes up the image. bpp will hold the bits per pixel used in the TGA file (this value should be 24 or 32 bits depending on whether or not there is an alpha channel). The third variable width will hold the width of the TGA image. height will hold the height of the image, and texID will be used to keep track of the textures once they are built. The structure will be called TextureImage.

The line just after the structure (TextureImage textures[1]) sets aside storage for the one texture that we will be using in this program.
typedef	struct										// Create A Structure
{
    GLubyte	*imageData;								// Image Data (Up To 32 Bits)
    GLuint	bpp;									// Image Color Depth In Bits Per Pixel
    GLuint	width;									// Image Width
    GLuint	height;									// Image Height
    GLuint	texID;									// Texture ID Used To Select A Texture
} TextureImage;										// Structure Name

TextureImage	textures[1];								// Storage For One Texture

LRESULT	CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);					// Declaration For WndProc
Now for the fun stuff! This section of code will load in a TGA file and convert it into a texture for use in the program. One thing to note is that this code will only load 24 or 32 bit uncompressed TGA files. I had a hard enough time making the code work with both 24 and 32 bit TGA's :) I never said I was a genious. I'd like to point out that I did not write all of this code on my own. Alot of the really good ideas I got from reading through random sites on the net. I just took all the good ideas and combined them into code that works well with OpenGL. Not easy, not extremely difficult!

We pass two parameters to this section of code. The first parameter points to memory that we can store the texture in (*texture). The second parameter is the name of the file that we want to load (*filename).

The first variable TGAheader[ ] holds 12 bytes. We'll compare these bytes with the first 12 bytes we read from the TGA file to make sure that the file is indeed a Targa file, and not some other type of image.

TGAcompare will be used to hold the first 12 bytes we read in from the TGA file. The bytes in TGAcompare will then be compared with the bytes in TGAheader to make sure everything matches.

header[ ] will hold the first 6 IMPORTANT bytes from the header file (width, height, and bits per pixel).

The variable bytesPerPixel will store the result after we divide bits per pixel by 8, leaving us with the number of bytes used per pixel.

imageSize will store the number of bytes required to make up the image (width * height * bytes per pixel).

temp is a temporary variable that we will use to swap bytes later in the program.

The last variable type is a variable that I use to select the proper texture building params depending on whether or not the TGA is 24 or 32 bit. If the texture is 24 bit we need to use GL_RGB mode when we build the texture. If the TGA is 32 bit we need to add the Alpha component, meaning we have to use GL_RGBA (By default I assume the image is 32 bit by default that is why type is GL_RGBA).
bool LoadTGA(TextureImage *texture, char *filename)					// Loads A TGA File Into Memory
{
    GLubyte		TGAheader[12]={0,0,2,0,0,0,0,0,0,0,0,0};			// Uncompressed TGA Header
    GLubyte		TGAcompare[12];							// Used To Compare TGA Header
    GLubyte		header[6];							// First 6 Useful Bytes From The Header
    GLuint		bytesPerPixel;							// Holds Number Of Bytes Per Pixel Used In The TGA File
    GLuint		imageSize;							// Used To Store The Image Size When Setting Aside Ram
    GLuint		temp;								// Temporary Variable
    GLuint		type=GL_RGBA;							// Set The Default GL Mode To RBGA (32 BPP)
The first line below opens the TGA file for reading. file is the handle we will use to point to the data within the file. the command fopen(filename, "rb") will open the file filename, and "rb" tells our program to open it for [r]eading in [b]inary mode!

The if statement has a few jobs. First off it checks to see if the file contains any data. If there is no data, NULL will be returned, the file will be closed with fclose(file), and we return false.

If the file contains information, we attempt to read the first 12 bytes of the file into TGAcompare. We break the line down like this: fread will read sizeof(TGAcompare) (12 bytes) from file into TGAcompare. Then we check to see if the number of bytes read is equal to sizeof(TGAcompare) which should be 12 bytes. If we were unable to read the 12 bytes into TGAcompare the file will close and false will be returned.

If everything has gone good so far, we then compare the 12 bytes we read into TGAcompare with the 12 bytes we have stored in TGAheader. If the bytes do not match, the file will close, and false will be returned.

Lastly, if everything has gone great, we attempt to read 6 more bytes into header (the important bytes). If 6 bytes are not available, again, the file will close and the program will return false.
    FILE *file = fopen(filename, "rb");						// Open The TGA File

    if(	file==NULL ||								// Does File Even Exist?
        fread(TGAcompare,1,sizeof(TGAcompare),file)!=sizeof(TGAcompare) ||	// Are There 12 Bytes To Read?
        memcmp(TGAheader,TGAcompare,sizeof(TGAheader))!=0		||	// Does The Header Match What We Want?
        fread(header,1,sizeof(header),file)!=sizeof(header))			// If So Read Next 6 Header Bytes
    {
        if (file == NULL)							// Did The File Even Exist? *Added Jim Strong*
            return false;							// Return False
        else
        {
            fclose(file);							// If Anything Failed, Close The File
            return false;							// Return False
        }
    }
If everything went ok, we now have enough information to define some important variables. The first variable we want to define is width. We want width to equal the width of the TGA file. We can find out the TGA width by multiplying the value stored in header[1] by 256. We then add the lowbyte which is stored in header[0].

The height is calculated the same way but instead of using the values stored in header[0] and header[1] we use the values stored in header[2] and header[3].

After we have calculated the width and height we check to see if either the width or height is less than or equal to 0. If either of the two variables is less than or equal to zero, the file will be closed, and false will be returned.

We also check to see if the TGA is a 24 or 32 bit image. We do this by checking the value stored at header[4]. If the value is not 24 or 32 (bit), the file will be closed, and false will be returned.

In case you have not realized. A return of false will cause the program to fail with the message "Initialization Failed". Make sure your TGA is an uncompressed 24 or 32 bit image!
    texture->width  = header[1] * 256 + header[0];					// Determine The TGA Width	(highbyte*256+lowbyte)
    texture->height = header[3] * 256 + header[2];					// Determine The TGA Height	(highbyte*256+lowbyte)

     if(	texture->width	<=0	||						// Is The Width Less Than Or Equal To Zero
        texture->height	<=0	||						// Is The Height Less Than Or Equal To Zero
        (header[4]!=24 && header[4]!=32))					// Is The TGA 24 or 32 Bit?
    {
        fclose(file);								// If Anything Failed, Close The File
        return false;								// Return False
    }
Now that we have calculated the image width and height we need to calculate the bits per pixel, bytes per pixel and image size.

The value in header[4] is the bits per pixel. So we set bpp to equal header[4].

If you know anything about bits and bytes, you know that 8 bits makes a byte. To figure out how many bytes per pixel the TGA uses, all we have to do is divide bits per pixel by 8. If the image is 32 bit, bytesPerPixel will equal 4. If the image is 24 bit, bytesPerPixel will equal 3.

To calculate the image size, we multiply width * height * bytesPerPixel. The result is stored in imageSize. If the image was 100x100x32 bit our image size would be 100 * 100 * 32/8 which equals 10000 * 4 or 40000 bytes!
    texture->bpp	= header[4];							// Grab The TGA's Bits Per Pixel (24 or 32)
    bytesPerPixel	= texture->bpp/8;						// Divide By 8 To Get The Bytes Per Pixel
    imageSize	= texture->width*texture->height*bytesPerPixel;			// Calculate The Memory Required For The TGA Data
Now that we know how many bytes our image is going to take, we need to allocate some memory. The first line below does the trick. imageData will point to a section of ram big enough to hold our image. malloc(imagesize) allocates the memory (sets memory aside for us to use) based on the amount of ram we request (imageSize).

The "if" statement has a few tasks. First it checks to see if the memory was allocated properly. If not, imageData will equal NULL, the file will be closed, and false will be returned.

If the memory was allocated, we attempt to read the image data from the file into the allocated memory. The line fread(texture->imageData, 1, imageSize, file) does the trick. fread means file read. imageData points to the memory we want to store the data in. 1 is the size of data we want to read in bytes (we want to read 1 byte at a time). imageSize is the total number of bytes we want to read. Because imageSize is equal to the total amount of ram required to hold the image, we end up reading in the entire image. file is the handle for our open file.

After reading in the data, we check to see if the amount of data we read in is the same as the value stored in imageSize. If the amount of data read and the value of imageSize is not the same, something went wrong. If any data was loaded, we will free it. (release the memory we allocated). The file will be closed, and false will be returned.
    texture->imageData=(GLubyte *)malloc(imageSize);				// Reserve Memory To Hold The TGA Data

    if(	texture->imageData==NULL ||						// Does The Storage Memory Exist?
        fread(texture->imageData, 1, imageSize, file)!=imageSize)		// Does The Image Size Match The Memory Reserved?
    {
        if(texture->imageData!=NULL)						// Was Image Data Loaded
            free(texture->imageData);					// If So, Release The Image Data

        fclose(file);								// Close The File
        return false;								// Return False
    }
If the data was loaded properly, things are going good :) All we have to do now is swap the Red and Blue bytes. In OpenGL we use RGB (red, green, blue). The data in a TGA file is stored BGR (blue, green, red). If we didn't swap the red and blue bytes, anything in the picture that should be red would be blue and anything that should be blue would be red.

The first thing we do is create a loop (i) that goes from 0 to imageSize. By doing this, we can loop through all of the image data. Our loop will increase by steps of 3 (0, 3, 6, 9, etc) if the TGA file is 24 bit, and 4 (0, 4, 8, 12, etc) if the image is 32 bit. The reason we increase by steps is so that the value at i is always going to be the first byte ([b]lue byte) in our group of 3 or 4 bytes.

Inside the loop, we store the [b]lue byte in our temp variable. We then grab the red byte which is stored at texture->imageData[i+2] (Remember that TGAs store the colors as BGR[A]. B is i+0, G is i+1 and R is i+2) and store it where the [b]lue byte used to be.

Lastly we move the [b]lue byte that we stored in the temp variable to the location where the [r]ed byte used to be (i+2), and we close the file with fclose(file).

If everything went ok, the TGA should now be stored in memory as usable OpenGL texture data!
    for(GLuint i=0; i<int(imageSize); i+=bytesPerPixel)				// Loop Through The Image Data
    {										// Swaps The 1st And 3rd Bytes ('R'ed and 'B'lue)
        temp=texture->imageData[i];						// Temporarily Store The Value At Image Data 'i'
        texture->imageData[i] = texture->imageData[i + 2];			// Set The 1st Byte To The Value Of The 3rd Byte
        texture->imageData[i + 2] = temp;					// Set The 3rd Byte To The Value In 'temp' (1st Byte Value)
    }

    fclose (file);									// Close The File
Now that we have usable data, it's time to make a texture from it. We start off by telling OpenGL we want to create a texture in the memory pointed to by &texture[0].texID.

It's important that you understand a few things before we go on. In the InitGL() code, when we call LoadTGA() we pass it two parameters. The first parameter is &textures[0]. In LoadTGA() we don't make reference to &textures[0]. We make reference to &texture[0] (no 's' at the end). When we modify &texture[0] we are actually modifying textures[0]. texture[0] assumes the identity of textures[0]. I hope that makes sense.

So if we wanted to create a second texture, we would pass the parameter &textures[1]. In LoadTGA() any time we modified texture[0] we would be modifying textures[1]. If we passed &textures[2], texture[0] would assume the identity of &textures[2], etc.

Hard to explain, easy to understand. Of course I wont be happy until I make it really clear :) Last example in english using an example. Say I had a box. I called it box #10. I gave it to my friend and asked him to fill it up. My friend could care less what number it is. To him it's just a box. So he fills what he calls "just a box". He gives it back to me. To me he just filled Box #10 for me. To him he just filled a box. If I give him another box called box #11 and say hey, can you fill this. He'll again think of it as just "box". He'll fill it and give it back to me full. To me he's just filled box #11 for me.

When I give LoadTGA &textures[1] it thinks of it as &texture[0]. It fills it with texture information, and once it's done I am left with a working textures[1]. If I give LoadTGA &textures[2] it again thinks of it as &texture[0]. It fills it with data, and I'm left with a working textures[2]. Make sense :)

Anyways... On to the code! We tell LoadTGA() to build our texture. We bind the texture, and tell OpenGL we want it to be linear filtered.
    // Build A Texture From The Data
    glGenTextures(1, &texture[0].texID);						// Generate OpenGL texture IDs

    glBindTexture(GL_TEXTURE_2D, texture[0].texID);					// Bind Our Texture
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);		// Linear Filtered
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);		// Linear Filtered
Now we check to see if the TGA file was 24 or 32 bit. If the TGA was 24 bit, we set the type to GL_RGB. (no alpha channel). If we didn't do this, OpenGL would try to build a texture with an alpha channel. The alpha information wouldn't be there, and the program would probably crash or give an error message.
    if (texture[0].bpp==24)								// Was The TGA 24 Bits
    {
        type=GL_RGB;								// If So Set The 'type' To GL_RGB
    }
Now we build our texture, the same way we've always done it. But instead of putting the type in ourselves (GL_RGB or GL_RGBA), we substitute the variable type. That way if the program detected that the TGA was 24 bit, the type will be GL_RGB. If our program detected that the TGA was 32 bit, the type would be GL_RGBA.

After the texture has been built, we return true. This lets the InitGL() code know that everything went ok.
    glTexImage2D(GL_TEXTURE_2D, 0, type, texture[0].width, texture[0].height, 0, type, GL_UNSIGNED_BYTE, texture[0].imageData);

    return true;									// Texture Building Went Ok, Return True
}
The code below is our standard build a font from a texture code. You've all seen this code before if you've gone through all the tutorials up until now. Nothing really new here, but I figured I'd include the code to make following through the program a little easier.

Only real difference is that I bind to textures[0].texID. Which points to the font texture. Only real difference is that .texID has been added.
GLvoid BuildFont(GLvoid)								// Build Our Font Display List
{
    base=glGenLists(256);								// Creating 256 Display Lists
    glBindTexture(GL_TEXTURE_2D, textures[0].texID);				// Select Our Font Texture
    for (int loop1=0; loop1<256; loop1++)						// Loop Through All 256 Lists
    {
        float cx=float(loop1%16)/16.0f;						// X Position Of Current Character
        float cy=float(loop1/16)/16.0f;						// Y Position Of Current Character

        glNewList(base+loop1,GL_COMPILE);					// Start Building A List
            glBegin(GL_QUADS);						// Use A Quad For Each Character
                glTexCoord2f(cx,1.0f-cy-0.0625f);			// Texture Coord (Bottom Left)
                glVertex2d(0,16);					// Vertex Coord (Bottom Left)
                glTexCoord2f(cx+0.0625f,1.0f-cy-0.0625f);		// Texture Coord (Bottom Right)
                glVertex2i(16,16);					// Vertex Coord (Bottom Right)
                glTexCoord2f(cx+0.0625f,1.0f-cy-0.001f);		// Texture Coord (Top Right)
                glVertex2i(16,0);					// Vertex Coord (Top Right)
                glTexCoord2f(cx,1.0f-cy-0.001f);			// Texture Coord (Top Left)
                glVertex2i(0,0);					// Vertex Coord (Top Left)
            glEnd();							// Done Building Our Quad (Character)
            glTranslated(14,0,0);						// Move To The Right Of The Character
        glEndList();								// Done Building The Display List
    }										// Loop Until All 256 Are Built
}
KillFont is still the same. We created 256 display lists, so we need to destroy 256 display lists when the program closes.
GLvoid KillFont(GLvoid)									// Delete The Font From Memory
{
    glDeleteLists(base,256);							// Delete All 256 Display Lists
}
The glPrint() code has only changed a bit. The letters are all stretched on the y axis. Making the letters very tall. I've explained the rest of the code in other tutorials. The stretching is accomplished with the glScalef(x,y,z) command. We leave the ratio at 1.0 on the x axis, we double the size on the y axis (2.0), and we leave it at 1.0 on the z axis.
GLvoid glPrint(GLint x, GLint y, int set, const char *fmt, ...)				// Where The Printing Happens
{
    char	text[1024];								// Holds Our String
    va_list	ap;									// Pointer To List Of Arguments

    if (fmt == NULL)								// If There's No Text
        return;									// Do Nothing

    va_start(ap, fmt);								// Parses The String For Variables
        vsprintf(text, fmt, ap);							// And Converts Symbols To Actual Numbers
    va_end(ap);									// Results Are Stored In Text

    if (set>1)									// Did User Choose An Invalid Character Set?
    {
        set=1;									// If So, Select Set 1 (Italic)
    }

    glEnable(GL_TEXTURE_2D);							// Enable Texture Mapping
    glLoadIdentity();								// Reset The Modelview Matrix
    glTranslated(x,y,0);								// Position The Text (0,0 - Top Left)
    glListBase(base-32+(128*set));							// Choose The Font Set (0 or 1)

    glScalef(1.0f,2.0f,1.0f);							// Make The Text 2X Taller

    glCallLists(strlen(text),GL_UNSIGNED_BYTE, text);				// Write The Text To The Screen
    glDisable(GL_TEXTURE_2D);							// Disable Texture Mapping
}
ReSizeGLScene() sets up an ortho view. Nothing really new. 0,1 is the top left of the screen. 639,480 is the bottom right. This gives us exact screen coordinates in 640 x 480 resolution. Notice that we set the value of swidth to equal the windows current width, and we set the value of sheight to equal the windows current height. Whenever the window is resized or moved, sheight and swidth will be updated.
GLvoid ReSizeGLScene(GLsizei width, GLsizei height)					// Resize And Initialize The GL Window
{
    swidth=width;									// Set Scissor Width To Window Width
    sheight=height;									// Set Scissor Height To Window Height
    if (height==0)									// Prevent A Divide By Zero By
    {
        height=1;								// Making Height Equal One
    }
    glViewport(0,0,width,height);							// Reset The Current Viewport
    glMatrixMode(GL_PROJECTION);							// Select The Projection Matrix
    glLoadIdentity();								// Reset The Projection Matrix
    glOrtho(0.0f,640,480,0.0f,-1.0f,1.0f);						// Create Ortho 640x480 View (0,0 At Top Left)
    glMatrixMode(GL_MODELVIEW);							// Select The Modelview Matrix
    glLoadIdentity();								// Reset The Modelview Matrix
}
The init code is very minimal. We load our TGA file. Notice that the first parameter passed is &textures[0]. The second parameter is the name of the file we want to load. In this case, we want to load the Font.TGA file. If LoadTGA() returns false for any reason, the if statement will also return false, causing the program to quit with an "initialization failed" message.

If you wanted to load a second texture you could use the following code: if ((!LoadTGA(&textures[0],"image1.tga")) || (!LoadTGA(&textures[1],"image2.tga"))) { }

After we load the TGA (creating our texture), we build our font, set shading to smooth, set the background color to black, enable clearing of the depth buffer, and select our font texture (bind to it).

Lastly we return true so that our program knows that initialization went ok.
int InitGL(GLvoid)									// All Setup For OpenGL Goes Here
{
    if (!LoadTGA(&textures[0],"Data/Font.TGA"))					// Load The Font Texture
    {
        return false;								// If Loading Failed, Return False
    }

    BuildFont();									// Build The Font

    glShadeModel(GL_SMOOTH);							// Enable Smooth Shading
    glClearColor(0.0f, 0.0f, 0.0f, 0.5f);						// Black Background
    glClearDepth(1.0f);								// Depth Buffer Setup
    glBindTexture(GL_TEXTURE_2D, textures[0].texID);				// Select Our Font Texture

    return TRUE;									// Initialization Went OK
}
The draw code is completely new :) we start off by creating a variable of type char called token. Token will hold parsed text later on in the code.

We have another variable called cnt. I use this variable both for counting the number of extensions supported, and for positioning the text on the screen. cnt is reset to zero every time we call DrawGLScene.

We clear the screen and depth buffer and then set the color to bright red (full red intensity, 50% green, 50% blue). at 50 on the x axis and 16 on the y axis we write teh word "Renderer". We also write "Vendor" and "Version" at the top of the screen. The reason each word does not start at 50 on the x axis is because I right justify the words (they all line up on the right side).
int DrawGLScene(GLvoid)									// Here's Where We Do All The Drawing
{
    char	*token;									// Storage For Our Token
    int	cnt=0;									// Local Counter Variable

    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);				// Clear Screen And Depth Buffer

    glColor3f(1.0f,0.5f,0.5f);							// Set Color To Bright Red
    glPrint(50,16,1,"Renderer");							// Display Renderer
    glPrint(80,48,1,"Vendor");							// Display Vendor Name
    glPrint(66,80,1,"Version");							// Display Version
Now that we have text on the screen, we change the color to orange, and grab the renderer, vendor name and version number from the video card. We do this by passing GL_RENDERER, GL_VENDOR & GL_VERSION to glGetString(). glGetString will return the requested renderer name, vendor name and version number. The information returned will be text so we need to cast the return information from glGetString as char. All this means is that we tell the program we want the information returned to be characters (text). If you don't include the (char *) you will get an error message. We're printing text, so we need text returned. We grab all three pieces of information and write the information we've grabbed to the right of the previous text.

The information we get from glGetString(GL_RENDERER) will be written beside the red text "Renderer", the information we get from glGetString(GL_VENDOR) will be written to the right of "Vendor", etc.

I'd like to explain casting in more detail, but I'm not really sure of a good way to explain it. If anyone has a good explanation, send it in, and I'll modify my explanation.

After we have the renderer information, vendor information and version number written to the screen, we change the color to a bright blue, and write "NeHe Productions" at the bottom of the screen :) Of course you can change this to anything you want.
    glColor3f(1.0f,0.7f,0.4f);							// Set Color To Orange
    glPrint(200,16,1,(char *)glGetString(GL_RENDERER));				// Display Renderer
    glPrint(200,48,1,(char *)glGetString(GL_VENDOR));				// Display Vendor Name
    glPrint(200,80,1,(char *)glGetString(GL_VERSION));				// Display Version

    glColor3f(0.5f,0.5f,1.0f);							// Set Color To Bright Blue
    glPrint(192,432,1,"NeHe Productions");						// Write NeHe Productions At The Bottom Of The Screen
Now we draw a nice white border around the screen, and around the text. We start off by resetting the modelview matrix. Because we've been printing text to the screen, and we might not be at 0,0 on the screen, it's a safe thing to do.

We then set the color to white, and start drawing our borders. A line strip is actually pretty easy to use. You tell OpenGL you want to draw a line strip with glBegin(GL_LINE_STRIP). Then we set the first vertex. Our first vertex will be on the far right side of the screen, and about 63 pixels up from the bottom of the screen (639 on the x axis, 417 on the y axis). Then we set the second vertex. We stay at the same location on the y axis (417), but we move to the far left side of the screen on the x axis (0). A line will be drawn from the right side of the screen (639,417) to the left side of the screen (0,417).

You need to have at least two vertices in order to draw a line (common sense). From the left side of the screen, we move down, right, and then straight up (128 on the y axis).

We then start another line strip, and draw a second box at the top of the screen. If you need to draw ALOT of connected lines, line strips can definitely cut down on the amount of code required as opposed to using regular lines (GL_LINES).
    glLoadIdentity();								// Reset The ModelView Matrix
    glColor3f(1.0f,1.0f,1.0f);							// Set The Color To White
    glBegin(GL_LINE_STRIP);								// Start Drawing Line Strips (Something New)
        glVertex2d(639,417);							// Top Right Of Bottom Box
        glVertex2d(  0,417);							// Top Left Of Bottom Box
        glVertex2d(  0,480);							// Lower Left Of Bottom Box
        glVertex2d(639,480);							// Lower Right Of Bottom Box
        glVertex2d(639,128);							// Up To Bottom Right Of Top Box
    glEnd();									// Done First Line Strip
    glBegin(GL_LINE_STRIP);								// Start Drawing Another Line Strip
        glVertex2d(  0,128);							// Bottom Left Of Top Box
        glVertex2d(639,128);							// Bottom Right Of Top Box
        glVertex2d(639,  1);							// Top Right Of Top Box
        glVertex2d(  0,  1);							// Top Left Of Top Box
        glVertex2d(  0,417);							// Down To Top Left Of Bottom Box
    glEnd();									// Done Second Line Strip
Now for something new. A wonderful GL command called glScissor(x,y,w,h). What this command does is creates almost what you would call a window. When GL_SCISSOR_TEST is enabled, the only portion of the screen that you can alter is the portion inside the scissor window. The first line below creates a scissor window starting at 1 on the x axis, and 13.5% (0.135...f) of the way from the bottom of the screen on the y axis. The scissor window will be 638 pixels wide (swidth-2), and 59.7% (0.597...f) of the screen tall.

In the next line we enable scissor testing. Anything we draw OUTSIDE the scissor window will not show up. You could draw a HUGE quad on the screen from 0,0 to 639,480, and you would only see the quad inside the scissor window, the rest of the screen would be unaffected. Very nice command!

The third line of code creates a variable called text that will hold the characters returned by glGetString(GL_EXTENSIONS). malloc(strlen((char *)glGetString(GL_EXTENSIONS))+1) allocates enough memory to hold the entire string returned +1 (so if the string was 50 characters, text would be able to hold all 50 characters).

The next line copies the GL_EXTENSIONS information to text. If we modify the GL_EXTENSIONS information directly, big problems will occur, so instead we copy the information into text, and then manipulate the information stored in text. Basically we're just taking a copy, and storing it in the variable text.
    glScissor(1	,int(0.135416f*sheight),swidth-2,int(0.597916f*sheight));	// Define Scissor Region
    glEnable(GL_SCISSOR_TEST);							// Enable Scissor Testing

    char* text=(char*)malloc(strlen((char *)glGetString(GL_EXTENSIONS))+1);		// Allocate Memory For Our Extension String
    strcpy (text,(char *)glGetString(GL_EXTENSIONS));				// Grab The Extension List, Store In Text
Now for something new. Lets pretend that after grabbing the extension information from the video card, the variable text had the following string of text stored in it... "GL_ARB_multitexture GL_EXT_abgr GL_EXT_bgra". strtok(TextToAnalyze,TextToFind) will scan through the variable text until it finds a " " (space). Once it finds a space, it will copy the text UP TO the space into the variable token. So in our little example, token would be equal to "GL_ARB_multitexture". The space is then replaced with a marker. More about this in a minute.

Next we create a loop that stops once there is no more information left in text. If there is no information in text, token will be equal to nothing (NULL) and the loop will stop.

We increase the counter variable (cnt) by one, and then check to see if the value in cnt is higher than the value of maxtokens. If cnt is higher than maxtokens we make maxtokens equal to cnt. That way if the counter hits 20, maxtokens will also equal 20. It's an easy way to keep track of the maximum value of cnt.
    token=strtok(text," ");								// Parse 'text' For Words, Seperated By " " (spaces)
    while(token!=NULL)								// While The Token Isn't NULL
    {
        cnt++;									// Increase The Counter
        if (cnt>maxtokens)							// Is 'maxtokens' Less Than 'cnt'
        {
            maxtokens=cnt;							// If So, Set 'maxtokens' Equal To 'cnt'
        }
So we have stored the first extension from our list of extensions in the variable token. Next thing to do is set the color to bright green. We then print the variable cnt on the left side of the screen. Notice that we print at 0 on the x axis. This should erase the left (white) border that we drew, but because scissor testing is on, pixels drawn at 0 on the x axis wont be modified. The border can't be drawn over.

The variable is drawn on the far left side of the screen (0 on the x axis). We start drawing at 96 on the y axis. To keep all the text from drawing to the same spot on the screen, we add (cnt*32) to 96. So if we are displaying the first extension, cnt will equal 1, and the text will be drawn at 96+(32*1) (128) on the y axis. If we display the second extension, cnt will equal 2, and the text will be drawn at 96+(32*2) (160) on the y axis.

Notice I also subtract scroll. When the program first runs, scroll will be equal to 0. So our first line of text is drawn at 96+(32*1)-0. If you press the DOWN ARROW, scroll is increased by 2. If scroll was 4, the text would be drawn at 96+(32*1)-4. That means the text would be drawn at 124 instead of 128 on the y axis because of scroll being equal to 4. The top of our scissor window ends at 128 on the y axis. Any part of the text drawn from lines 124-127 on the y axis will not appear on the screen.

Same thing with the bottom of the screen. If cnt was equal to 11 and scroll was equal to 0, the text would be drawn at 96+(32*11)-0 which is 448 on the y axis. Because the scissor window only allows us to draw as far as line 416 on the y axis, the text wouldn't show up at all.

The final result is that we end up with a scrollable window that only allows us to look at 288/32 (9) lines of text. 288 is the height of our scissor window. 32 is the height of the text. By changing the value of scroll we can move the text up or down (offset the text).

The effect is similar to a movie projector. The film rolls by the lens, and all you see is the current frame. You don't see the area above or below the frame. The lens acts as a window similar to the window created by the scissor test.

After we have drawn the current count (cnt) to the screen, we change the color to yellow, move 50 pixels to the right on the x axis, and we write the text stored in the variable token to the screen.

Using our example above, the first line of text displayed on the screen should look like this:

1 GL_ARB_multitexture
        glColor3f(0.5f,1.0f,0.5f);						// Set Color To Bright Green
        glPrint(0,96+(cnt*32)-scroll,0,"%i",cnt);				// Print Current Extension Number
After we have drawn the current count to the screen, we change the color to yellow, move 50 pixels to the right on the x axis, and we write the text stored in the variable token to the screen.

Using our example above, the first line of text displayed on the screen should look like this:

1 GL_ARB_multitexture
        glColor3f(1.0f,1.0f,0.5f);						// Set Color To Yellow
        glPrint(50,96+(cnt*32)-scroll,0,token);					// Print The Current Token (Parsed Extension Name)
After we have displayed the value of token on the screen, we need to check through the variable text to see if any more extensions are supported. Instead of using token=strtok(text," ") like we did above, we replace text with NULL. This tells the command strtok to search from the last marker to the NEXT space in the string of text (text).

In our example above ("GL_ARB_multitexturemarkerGL_EXT_abgr GL_EXT_bgra") there will now be a marker after the text "GL_ARB_multitexture". The line below will start search FROM the marker to the next space. Everything from the marker to the next space will be stored in token. token should end up being "GL_EXT_abgr", and text will end up being "GL_ARB_multitexturemarkerGL_EXT_abgrmarkerGL_EXT_bgra".

Once strtok() has run out of text to store in token, token will become NULL and the loop will stop.
        token=strtok(NULL," ");							// Search For The Next Token
    }
After all of the extensions have been parsed from the variable text we can disable scissor testing, and free the variable text. This releases the ram we were using to hold the information we got from glGetString(GL_EXTENSIONS).

The next time DrawGLScene() is called, new memory will be allocated. A fresh copy of the information returned by glGetStrings(GL_EXTENSIONS) will be copied into the variable text and the entire process will start over.
    glDisable(GL_SCISSOR_TEST);							// Disable Scissor Testing

    free (text);									// Free Allocated Memory
The first line below isn't necessary, but I thought it might be a good idea to talk about it, just so everyone knows that it exists. The command glFlush() basically tells OpenGL to finish up what it's doing. If you ever notice flickering in your program (quads disappearing, etc). Try adding the flush command to the end of DrawGLScene. It flushes out the rendering pipeline. You may notice flickering if you're program doesn't have enough time to finish rendering the scene.

Last thing we do is return true to show that everything went ok.
    glFlush();									// Flush The Rendering Pipeline
    return TRUE;									// Everything Went OK
}
The only thing to note in KillGLWindow() is that I have added KillFont() at the end. That way whenever the window is killed, the font is also killed.
GLvoid KillGLWindow(GLvoid)								// Properly Kill The Window
{
    if (fullscreen)									// Are We In Fullscreen Mode?
    {
        ChangeDisplaySettings(NULL,0);						// If So Switch Back To The Desktop
        ShowCursor(TRUE);							// Show Mouse Pointer
    }

    if (hRC)									// Do We Have A Rendering Context?
    {
        if (!wglMakeCurrent(NULL,NULL))						// Are We Able To Release The DC And RC Contexts?
        {
            MessageBox(NULL,"Release Of DC And RC Failed.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        }

        if (!wglDeleteContext(hRC))						// Are We Able To Delete The RC?
        {
            MessageBox(NULL,"Release Rendering Context Failed.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        }
        hRC=NULL;								// Set RC To NULL
    }

    if (hDC && !ReleaseDC(hWnd,hDC))						// Are We Able To Release The DC
    {
        MessageBox(NULL,"Release Device Context Failed.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        hDC=NULL;								// Set DC To NULL
    }

    if (hWnd && !DestroyWindow(hWnd))						// Are We Able To Destroy The Window?
    {
        MessageBox(NULL,"Could Not Release hWnd.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        hWnd=NULL;								// Set hWnd To NULL
    }

    if (!UnregisterClass("OpenGL",hInstance))					// Are We Able To Unregister Class
    {
        MessageBox(NULL,"Could Not Unregister Class.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        hInstance=NULL;								// Set hInstance To NULL
    }

    KillFont();									// Kill The Font
}
CreateGLWindow(), and WndProc() are the same.

The first change in WinMain() is the title that appears at the top of the window. It should now read "NeHe's Extensions, Scissoring, Token & TGA Loading Tutorial"
int WINAPI WinMain(	HINSTANCE	hInstance,					// Instance
            HINSTANCE	hPrevInstance,					// Previous Instance
            LPSTR		lpCmdLine,					// Command Line Parameters
            int		nCmdShow)					// Window Show State
{
    MSG	msg;									// Windows Message Structure
    BOOL	done=FALSE;								// Bool Variable To Exit Loop

    // Ask The User Which Screen Mode They Prefer
    if (MessageBox(NULL,"Would You Like To Run In Fullscreen Mode?", "Start FullScreen?",MB_YESNO|MB_ICONQUESTION)==IDNO)
    {
        fullscreen=FALSE;							// Windowed Mode
    }

    // Create Our OpenGL Window
    if (!CreateGLWindow("NeHe's Token, Extensions, Scissoring & TGA Loading Tutorial",640,480,16,fullscreen))
    {
        return 0;								// Quit If Window Was Not Created
    }

    while(!done)									// Loop That Runs While done=FALSE
    {
        if (PeekMessage(&msg,NULL,0,0,PM_REMOVE))				// Is There A Message Waiting?
        {
            if (msg.message==WM_QUIT)					// Have We Received A Quit Message?
            {
                done=TRUE;						// If So done=TRUE
            }
            else								// If Not, Deal With Window Messages
            {
                DispatchMessage(&msg);					// Dispatch The Message
            }
        }
        else									// If There Are No Messages
        {
            // Draw The Scene.  Watch For ESC Key And Quit Messages From DrawGLScene()
            if ((active && !DrawGLScene()) || keys[VK_ESCAPE])		// Active?  Was There A Quit Received?
            {
                done=TRUE;						// ESC or DrawGLScene Signalled A Quit
            }
            else								// Not Time To Quit, Update Screen
            {
                SwapBuffers(hDC);					// Swap Buffers (Double Buffering)

                if (keys[VK_F1])					// Is F1 Being Pressed?
                {
                    keys[VK_F1]=FALSE;				// If So Make Key FALSE
                    KillGLWindow();					// Kill Our Current Window
                    fullscreen=!fullscreen;				// Toggle Fullscreen / Windowed Mode
                    // Recreate Our OpenGL Window
                    if (!CreateGLWindow("NeHe's Token, Extensions, Scissoring & TGA Loading Tutorial",640,480,16,fullscreen))
                    {
                        return 0;				// Quit If Window Was Not Created
                    }
                }
The code below checks to see if the up arrow is being pressed if it is, and scroll is greater than 0, we decrease scroll by 2. This causes the text to move down the screen.
                if (keys[VK_UP] && (scroll>0))				// Is Up Arrow Being Pressed?
                {
                    scroll-=2;					// If So, Decrease 'scroll' Moving Screen Down
                }
If the down arrow is being pressed and scroll is less than (32*(maxtokens-9)) scroll will be increased by 2, andd the text on the screen will scroll upwards.

32 is the number of lines that each letter takes up. Maxtokens is the total amount of extensions that your video card supports. We subtract 9, because 9 lines can be shown on the screen at once. If we did not subtract 9, we could scroll past the end of the list, causing the list to scroll completely off the screen. Try leaving the -9 out if you're not sure what I mean.
                if (keys[VK_DOWN] && (scroll<32*(maxtokens-9)))		// Is Down Arrow Being Pressed?
                {
                    scroll+=2;					// If So, Increase 'scroll' Moving Screen Up
                }
            }
        }
    }

    // Shutdown
    KillGLWindow();									// Kill The Window
    return (msg.wParam);								// Exit The Program
}
I hope that you found this tutorial interesting. By the end of this tutorial you should know how to read the vendor name, renderer and version number from your video card. You should also know how to find out what extensions are supported on any video card that supports OpenGL. You should know what scissor testing is, and how it can be used in OpenGL projects of your own, and lastly, you should know how to load TGA Images instead of Bitmap Images for use as textures.

If you find any problems with the tutorial, or you find the information to hard to understand, let me know. I want the tutorials to be the best they can be. Your feedback is important!


Jeff Molofee's OpenGL Windows Tutorial #26

Lesson 26
Welcome to yet another exciting tutorial! This time we will focus on the effect rather than the graphics, although the final result is pretty cool looking! In this tutorial you will learn how to morph seamlessly from one object to another. Similar to the effect I use in the dolphin demo. Although there are a few catches. First thing to note is that each object must have the same amount of points. Very rare to luck out and get 3 object made up of exactly the same amount of vertices, but it just so happens, in this tutorial we have 3 objects with exactly the same amount of points :) Don't get me wrong, you can use objects with different values, but the transition from one object to another is odd looking and not as smooth.

You will also learn how to read object data from a file. Similar to the format used in lesson 10, although it shouldn't be hard to modify the code to read .ASC files or some other text type data files. In general, it's a really cool effect, a really cool tutorial, so lets begin!

We start off as usual. Including all the required header files, along with the math and standard input / output headers. Notice we don't include glaux. That's because we'll be drawing points rather than textures in this tutorial. After you've got the tutorial figured out, you can try playing with Polygons, Lines, and Textures!
#include	<windows.h>								// Header File For Windows
#include	<math.h>								// Math Library Header File
#include	<stdio.h>								// Header File For Standard Input/Output
#include	<gl\gl.h>								// Header File For The OpenGL32 Library
#include	<gl\glu.h>								// Header File For The GLu32 Library

HDC		hDC=NULL;								// Device Context Handle
HGLRC		hRC=NULL;								// Rendering Context Handle
HWND		hWnd=NULL;								// Window Handle
HINSTANCE	hInstance;								// Instance Handle

bool		keys[256];								// Key Array
bool		active=TRUE;								// Program's Active
bool		fullscreen=TRUE;							// Default Fullscreen To True
After setting up all the standard variables, we will add some new variables. xrot, yrot and zrot will hold the current rotation values for the x, y and z axes of the onscreen object. xspeed, yspeed and zspeed will control how fast the object is rotating on each axis. cx, cy and cz control the position of the object on the screen (where it's drawn left to right cx, up and down cy and into and out of the screen cz)

The variable key is a variable that I have included to make sure the user doesn't try to morph from the first shape back into the first shape. This would be pretty pointless and would cause a delay while the points were trying to morph to the position they're already in.

step is a counter variable that counts through all the steps specified by steps. If you increase the value of steps it will take longer for the object to morph, but the movement of the points as they morph will be smoother. Once step is equal to steps we know the morphing has been completed.

The last variable morph lets our program know if it should be morphing the points or leaving them where they are. If it's TRUE, the object is in the process of morphing from one shape to another.
GLfloat		xrot,yrot,zrot,								// X, Y & Z Rotation
        xspeed,yspeed,zspeed,							// X, Y & Z Spin Speed
        cx,cy,cz=-15;								// X, Y & Z Position

int		key=1;									// Used To Make Sure Same Morph Key Is Not Pressed
int		step=0,steps=200;							// Step Counter And Maximum Number Of Steps
bool		morph=FALSE;								// Default morph To False (Not Morphing)
Now we create a structure to keep track of a vertex. The structure will hold the x, y and z values of any point on the screen. The variables x, y & z are all floating point so we can position the point anywhere on the screen with great accuracy. The structure name is VERTEX.
typedef struct										// Structure For 3D Points
{
    float	x, y, z;								// X, Y & Z Points
} VERTEX;										// Called VERTEX
We already have a structure to keep track of vertices, and we know that an object is made up of many vertices so lets create an OBJECT structure. The first variable verts is an integer value that will hold the number of vertices required to make up an object. So if our object has 5 points, the value of verts will be equal to 5. We will set the value later in the code. For now, all you need to know is that verts keeps track of how many points we use to create the object.

The variable points will reference a single VERTEX (x, y and z values). This allows us to grab the x, y or z value of any point using points[{point we want to access}].{x, y or z}.

The name of this structure is... you guessed it... OBJECT!
typedef	struct										// Structure For An Object
{
 int		verts;									// Number Of Vertices For The Object
 VERTEX		*points;								// One Vertice (Vertex x,y & z)
} OBJECT;										// Called OBJECT
Now that we have created a VERTEX structure and an OBJECT structure we can define some objects.

The variable maxver will be used to keep track of the maximum number of variables used in any of the objects. If one object only had 5 points, another had 20, and the last object had 15, the value of maxver would be equal to the greatest number of points used. So maxver would be equal to 20.

After we define maxver we can define the objects. morph1, morph2, morph3, morph4 & helper are all defined as an OBJECT. *sour & *dest are defined as OBJECT* (pointer to an object). The object is made up of verticies (VERTEX). The first 4 morph{num} objects will hold the 4 objects we want to morph to and from. helper will be used to keep track of changes as the object is morphed. *sour will point to the source object and *dest will point to the object we want to morph to (destination object).
int		maxver;									// Will Eventually Hold The Maximum Number Of Vertices
OBJECT		morph1,morph2,morph3,morph4,						// Our 4 Morphable Objects (morph1,2,3 & 4)
        helper,*sour,*dest;		 					// Helper Object, Source Object, Destination Object
Same as always, we declare WndProc().
LRESULT	CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);					// Declaration
The code below allocates memory for each object, based on the number of vertices we pass to n. *k will point to the object we want to allocate memory for.

The line inside the { }'s allocates the memory for object k's points. A point is an entire VERTEX (3 floats). The memory allocated is the size of VERTEX (3 floats) multiplied by the number of points (n). So if there were 10 points (n=10) we would be allocating room for 30 floating point values (3 floats * 10 points).
void objallocate(OBJECT *k,int n)							// Allocate Memory For Each Object
{											// And Defines points
    k->points=(VERTEX*)malloc(sizeof(VERTEX)*n);					// Sets points Equal To VERTEX * Number Of Vertices
}											// (3 Points For Each Vertice)
The following code frees the object, releasing the memory used to create the object. The object is passed as k. The free command tells our program to release all the points used to make up our object (k).
void objfree(OBJECT *k)									// Frees The Object (Releasing The Memory)
{
    free(k->points);								// Frees Points
}
The code below reads a string of text from a file. The pointer to our file structure is passed to *f. The variable string will hold the text that we have read in.

We start off be creating a do / while loop. fgets() will read up to 255 characters from our file f and store the characters at *string. If the line read is blank (carriage return \n), the loop will start over, attempting to find a line with text. The while() statement checks for blank lines and if found starts over again.

After the string has been read in we return.
void readstr(FILE *f,char *string)							// Reads A String From File (f)
{
    do										// Do This
    {
        fgets(string, 255, f);							// Gets A String Of 255 Chars Max From f (File)
    } while ((string[0] == '/') || (string[0] == '\n'));				// Until End Of Line Is Reached
    return;										// Return
}
Now we load in an object. *name points to the filename. *k points to the object we wish to load data into.

We start off with an integer variable called ver. ver will hold the number of vertices used to build the object.

The variables rx, ry & rz will hold the x, y & z values of each vertex.

The variable filein is the pointer to our file structure, and oneline[ ] will be used to hold 255 characters of text.

We open the file name for read in text translated mode (meaning CTRL-Z represents the end of a line). Then we read in a line of text using readstr(filein,oneline). The line of text will be stored in oneline.

After we have read in the text, we scan the line of text (oneline) for the phrase "Vertices: {some number}{carriage return}. If the text is found, the number is stored in the variable ver. This number is the number of vertices used to create the object. If you look at the object text files, you'll see that the first line of text is: Vertices: {some number}.

After we know how many vertices are used we store the results in the objects verts variable. Each object could have a different value if each object had a different number of vertices.

The last thing we do in this section of code is allocate memory for the object. We do this by calling objallocate({object name},{number of verts}).
void objload(char *name,OBJECT *k)							// Loads Object From File (name)
{
    int	ver;									// Will Hold Vertice Count
    float	rx,ry,rz;								// Hold Vertex X, Y & Z Position
    FILE	*filein;								// Filename To Open
    char	oneline[255];								// Holds One Line Of Text (255 Chars Max)

    filein = fopen(name, "rt");							// Opens The File For Reading Text In Translated Mode
                                            // CTRL Z Symbolizes End Of File In Translated Mode
    readstr(filein,oneline);							// Jumps To Code That Reads One Line Of Text From The File
    sscanf(oneline, "Vertices: %d\n", &ver);					// Scans Text For "Vertices: ".  Number After Is Stored In ver
    k->verts=ver;									// Sets Objects verts Variable To Equal The Value Of ver
    objallocate(k,ver);								// Jumps To Code That Allocates Ram To Hold The Object
We know how many vertices the object has. We have allocated memory, now all that is left to do is read in the vertices. We create a loop using the variable i. The loop will go through all the vertices.

Next we read in a line of text. This will be the first line of valid text underneath the "Vertices: {some number}" line. What we should end up reading is a line with floating point values for x, y & z.

The line is analyzed with sscanf() and the three floating point values are extracted and stored in rx, ry and rz.
    for (int i=0;i<ver;i++)								// Loops Through The Vertices
    {
        readstr(filein,oneline);						// Reads In The Next Line Of Text
        sscanf(oneline, "%f %f %f", &rx, &ry, &rz);				// Searches For 3 Floating Point Numbers, Store In rx,ry & rz
The following three lines are hard to explain in plain english if you don't understand structures, etc, but I'll try my best :)

The line k->points[i].x=rx can be broken down like this:

rx is the value on the x axis for one of the points.
points[i].x is the x axis position of point[i].
If i is 0 then were are setting the x axis value of point 1, if i is 1, we are setting the x axis value of point 2, and so on.
points[i] is part of our object (which is represented as k).

So if i is equal to 0, what we are saying is: The x axis of point 1 (point[0].x) in our object (k) equals the x axis value we just read from the file (rx).

The other two lines set the y & z axis values for each point in our object.

We loop through all the vertices. If there are not enough vertices, an error might occur, so make sure the text at the beginning of the file "Vertices: {some number}" is actually the number of vertices in the file. Meaning if the top line of the file says "Vertices: 10", there had better be 10 Verticies (x, y and z values)!

After reading in all of the verticies we close the file, and check to see if the variable ver is greater than the variable maxver. If ver is greater than maxver, we set maxver to equal ver. That way if we read in one object and it has 20 verticies, maxver will become 20. If we read in another object, and it has 40 verticies, maxver will become 40. That way we know how many vertices our largest object has.
        k->points[i].x = rx;							// Sets Objects (k) points.x Value To rx
        k->points[i].y = ry;							// Sets Objects (k) points.y Value To ry
        k->points[i].z = rz;							// Sets Objects (k) points.z Value To rz
    }
    fclose(filein);									// Close The File

    if(ver>maxver) maxver=ver;							// If ver Is Greater Than maxver Set maxver Equal To ver
}											// Keeps Track Of Highest Number Of Vertices Used
The next bit of code may look a little intimidating... it's NOT :) I'll explain it so clearly you'll laugh when you next look at it.

What the code below does is calculates a new position for each point when morphing is enabled. The number of the point to calculate is stored in i. The results will be returned in the VERTEX calculate.

The first variable we create is a VERTEX called a. This will give a an x, y and z value.

Lets look at the first line. The x value of the VERTEX a equals the x value of point[i] (point[i].x) in our SOURCE object minus the x value of point[i] (point[i].x) in our DESTINATION object divided by steps.

So lets plug in some numbers. Lets say our source objects first x value is 40 and our destination objects first x value is 20. We already know that steps is equal to 200! So that means that a.x=(40-20)/200... a.x=(20)/200... a.x=0.1.

What this means is that in order to move from 40 to 20 in 200 steps, we need to move by 0.1 units each calculation. To prove this calculation, multiply 0.1 by 200, and you get 20. 40-20=20 :)

We do the same thing to calculate how many units to move on both the y axis and the z axis for each point. If you increase the value of steps the movements will be even more fine (smooth), but it will take longer to morph from one position to another.
VERTEX calculate(int i)									// Calculates Movement Of Points During Morphing
{
    VERTEX a;									// Temporary Vertex Called a
    a.x=(sour->points[i].x-dest->points[i].x)/steps;				// a.x Value Equals Source x - Destination x Divided By Steps
    a.y=(sour->points[i].y-dest->points[i].y)/steps;				// a.y Value Equals Source y - Destination y Divided By Steps
    a.z=(sour->points[i].z-dest->points[i].z)/steps;				// a.z Value Equals Source z - Destination z Divided By Steps
    return a;									// Return The Results
}											// This Makes Points Move At A Speed So They All Get To Their
The ReSizeGLScene() code hasn't changed so we'll skip over it.
GLvoid ReSizeGLScene(GLsizei width, GLsizei height)					// Resize And Initialize The GL Window
In the code below we set blending for translucency. This allows us to create neat looking trails when the points are moving.
int InitGL(GLvoid)									// All Setup For OpenGL Goes Here
{
    glBlendFunc(GL_SRC_ALPHA,GL_ONE);						// Set The Blending Function For Translucency
    glClearColor(0.0f, 0.0f, 0.0f, 0.0f);						// This Will Clear The Background Color To Black
    glClearDepth(1.0);								// Enables Clearing Of The Depth Buffer
    glDepthFunc(GL_LESS);								// The Type Of Depth Test To Do
    glEnable(GL_DEPTH_TEST);							// Enables Depth Testing
    glShadeModel(GL_SMOOTH);							// Enables Smooth Color Shading
    glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);				// Really Nice Perspective Calculations
We set the maxver variable to 0 to start off. We haven't read in any objects so we don't know what the maximum amount of vertices will be.

Next well load in 3 objects. The first object is a sphere. The data for the sphere is stored in the file sphere.txt. The data will be loaded into the object named morph1. We also load a torus, and a tube into objects morph2 and morph3.
    maxver=0;									// Sets Max Vertices To 0 By Default
    objload("data/sphere.txt",&morph1);						// Load The First Object Into morph1 From File sphere.txt
    objload("data/torus.txt",&morph2);						// Load The Second Object Into morph2 From File torus.txt
    objload("data/tube.txt",&morph3);						// Load The Third Object Into morph3 From File tube.txt
The 4th object isn't read from a file. It's a bunch of dots randomly scattered around the screen. Because we're not reading the data from a file, we have to manually allocate the memory by calling objallocate(&morph4,468). 468 means we want to allocate enough space to hold 468 vertices (the same amount of vertices the other 3 objects have).

After allocating the space, we create a loop that assigns a random x, y and z value to each point. The random value will be a floating point value from +7 to -7. (14000/1000=14... minus 7 gives us a max value of +7... if the random number is 0, we have a minimum value of 0-7 or -7).
    objallocate(&morph4,486);							// Manually Reserver Ram For A 4th 468 Vertice Object (morph4)
    for(int i=0;i<486;i++)								// Loop Through All 468 Vertices
    {
        morph4.points[i].x=((float)(rand()%14000)/1000)-7;			// morph4 x Point Becomes A Random Float Value From -7 to 7
        morph4.points[i].y=((float)(rand()%14000)/1000)-7;			// morph4 y Point Becomes A Random Float Value From -7 to 7
        morph4.points[i].z=((float)(rand()%14000)/1000)-7;			// morph4 z Point Becomes A Random Float Value From -7 to 7
    }
We then load the sphere.txt as a helper object. We never want to modify the object data in morph{1/2/3/4} directly. We modify the helper data to make it become one of the 4 shapes. Because we start out displaying morph1 (a sphere) we start the helper out as a sphere as well.

After all of the objects are loaded, we set the source and destination objects (sour and dest) to equal morph1, which is the sphere. This way everything starts out as a sphere.
    objload("data/sphere.txt",&helper);						// Load sphere.txt Object Into Helper (Used As Starting Point)
    sour=dest=&morph1;								// Source & Destination Are Set To Equal First Object (morph1)

    return TRUE;									// Initialization Went OK
}
Now for the fun stuff. The actual rendering code :)

We start off normal. Clear the screen, depth buffer and reset the modelview matrix. Then we position the object on the screen using the values stored in cx, cy and cz.

Rotations are done using xrot, yrot and zrot.

The rotation angle is increased based on xpseed, yspeed and zspeed.

Finally 3 temporary variables are created tx, ty and tz, along with a new VERTEX called q.
void DrawGLScene(GLvoid)								// Here's Where We Do All The Drawing
{
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);				// Clear The Screen And The Depth Buffer
    glLoadIdentity();								// Reset The View
    glTranslatef(cx,cy,cz);								// Translate The The Current Position To Start Drawing
    glRotatef(xrot,1,0,0);								// Rotate On The X Axis By xrot
    glRotatef(yrot,0,1,0);								// Rotate On The Y Axis By yrot
    glRotatef(zrot,0,0,1);								// Rotate On The Z Axis By zrot

    xrot+=xspeed; yrot+=yspeed; zrot+=zspeed;					// Increase xrot,yrot & zrot by xspeed, yspeed & zspeed

    GLfloat tx,ty,tz;								// Temp X, Y & Z Variables
    VERTEX q;									// Holds Returned Calculated Values For One Vertex
Now we draw the points and do our calculations if morphing is enabled. glBegin(GL_POINTS) tells OpenGL that each vertex that we specify will be drawn as a point on the screen.

We create a loop to loop through all the vertices. You could use maxver, but because every object has the same number of vertices we'll use morph1.verts.

Inside the loop we check to see if morph is TRUE. If it is we calculate the movement for the current point (i). q.x, q.y and q.z will hold the results. If morph is false, q.x, q.y and q.z will be set to 0 (preventing movement).

the points in the helper object are moved based on the results of we got from calculate(i). (remember earlier that we calculated a point would have to move 0.1 unit to make it from 40 to 20 in 200 steps).

We adjust the each points value on the x, y and z axis by subtracting the number of units to move from helper.

The new helper point is stored in tx, ty and tz. (t{x/y/z}=helper.points[i].{x/y/z}).
    glBegin(GL_POINTS);								// Begin Drawing Points
        for(int i=0;i<morph1.verts;i++)						// Loop Through All The Verts Of morph1 (All Objects Have
        {									// The Same Amount Of Verts For Simplicity, Could Use maxver Also)
            if(morph) q=calculate(i); else q.x=q.y=q.z=0;			// If morph Is True Calculate Movement Otherwise Movement=0
            helper.points[i].x-=q.x;					// Subtract q.x Units From helper.points[i].x (Move On X Axis)
            helper.points[i].y-=q.y;					// Subtract q.y Units From helper.points[i].y (Move On Y Axis)
            helper.points[i].z-=q.z;					// Subtract q.z Units From helper.points[i].z (Move On Z Axis)
            tx=helper.points[i].x;						// Make Temp X Variable Equal To Helper's X Variable
            ty=helper.points[i].y;						// Make Temp Y Variable Equal To Helper's Y Variable
            tz=helper.points[i].z;						// Make Temp Z Variable Equal To Helper's Z Variable
Now that we have the new position calculated it's time to draw our points. We set the color to a bright bluish color, and the draw the first point with glVertex3f(tx,ty,tz). This draws a point at the newly calculated position.

We then darken the color a little, and move 2 steps in the direction we just calculated instead of one. This moves the point to the newly calculated position, and then moves it again in the same direction. So if it was travelling left at 0.1 units, the next dot would be at 0.2 units. After calculating 2 positions ahead we draw the second point.

Finally we set the color to dark blue, and calculate even further ahead. This time using our example we would move 0.4 units to the left instead of 0.1 or 0.2. The end result is a little tail of particles following as the dots move. With blending, this creates a pretty cool effect!

glEnd() tells OpenGL we are done drawing points.
            glColor3f(0,1,1);						// Set Color To A Bright Shade Of Off Blue
            glVertex3f(tx,ty,tz);						// Draw A Point At The Current Temp Values (Vertex)
            glColor3f(0,0.5f,1);						// Darken Color A Bit
            tx-=2*q.x; ty-=2*q.y; ty-=2*q.y;				// Calculate Two Positions Ahead
            glVertex3f(tx,ty,tz);						// Draw A Second Point At The Newly Calculate Position
            glColor3f(0,0,1);						// Set Color To A Very Dark Blue
            tx-=2*q.x; ty-=2*q.y; ty-=2*q.y;				// Calculate Two More Positions Ahead
            glVertex3f(tx,ty,tz);						// Draw A Third Point At The Second New Position
        }									// This Creates A Ghostly Tail As Points Move
    glEnd();									// Done Drawing Points
The last thing we do is check to see if morph is TRUE and step is less than steps (200). If step is less than 200, we increase step by 1.

If morph is false or step is greater than or equal to steps (200), morph is set to FALSE, the sour (source) object is set to equal the dest (destination) object, and step is set back to 0. This tells the program that morphing is not happening or it has just finished.
    // If We're Morphing And We Haven't Gone Through All 200 Steps Increase Our Step Counter
    // Otherwise Set Morphing To False, Make Source=Destination And Set The Step Counter Back To Zero.
    if(morph && step<=steps)step++; else { morph=FALSE; sour=dest; step=0;}
}
The KillGLWindow() code hasn't changed much. The only real difference is that we free all of the objects from memory before we kill the windows. This prevents memory leaks, and is good practice ;)
GLvoid KillGLWindow(GLvoid)								// Properly Kill The Window
{
    objfree(&morph1);								// Jump To Code To Release morph1 Allocated Ram
    objfree(&morph2);								// Jump To Code To Release morph2 Allocated Ram
    objfree(&morph3);								// Jump To Code To Release morph3 Allocated Ram
    objfree(&morph4);								// Jump To Code To Release morph4 Allocated Ram
    objfree(&helper);								// Jump To Code To Release helper Allocated Ram

    if (fullscreen)									// Are We In Fullscreen Mode?
    {
        ChangeDisplaySettings(NULL,0);						// If So Switch Back To The Desktop
        ShowCursor(TRUE);							// Show Mouse Pointer
    }

    if (hRC)									// Do We Have A Rendering Context?
    {
        if (!wglMakeCurrent(NULL,NULL))						// Are We Able To Release The DC And RC Contexts?
        {
            MessageBox(NULL,"Release Of DC And RC Failed.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        }

        if (!wglDeleteContext(hRC))						// Are We Able To Delete The RC?
        {
            MessageBox(NULL,"Release Rendering Context Failed.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        }
        hRC=NULL;								// Set RC To NULL
    }

    if (hDC && !ReleaseDC(hWnd,hDC))						// Are We Able To Release The DC
    {
        MessageBox(NULL,"Release Device Context Failed.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        hDC=NULL;								// Set DC To NULL
    }

    if (hWnd && !DestroyWindow(hWnd))						// Are We Able To Destroy The Window?
    {
        MessageBox(NULL,"Could Not Release hWnd.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        hWnd=NULL;								// Set hWnd To NULL
    }

    if (!UnregisterClass("OpenGL",hInstance))					// Are We Able To Unregister Class
    {
        MessageBox(NULL,"Could Not Unregister Class.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        hInstance=NULL;								// Set hInstance To NULL
    }
}
The CreateGLWindow() and WndProc() code hasn't changed. So I'll skip over it.
BOOL CreateGLWindow()									// Creates The GL Window

LRESULT CALLBACK WndProc()								// Handle For This Window
In WinMain() there are a few changes. First thing to note is the new caption on the title bar :)
int WINAPI WinMain(	HINSTANCE	hInstance,					// Instance
            HINSTANCE	hPrevInstance,					// Previous Instance
            LPSTR		lpCmdLine,					// Command Line Parameters
            int		nCmdShow)					// Window Show State
{
    MSG	msg;									// Windows Message Structure
    BOOL	done=FALSE;								// Bool Variable To Exit Loop

    // Ask The User Which Screen Mode They Prefer
    if (MessageBox(NULL,"Would You Like To Run In Fullscreen Mode?", "Start FullScreen?",MB_YESNO|MB_ICONQUESTION)==IDNO)
    {
        fullscreen=FALSE;							// Windowed Mode
    }

    // Create Our OpenGL Window
    if (!CreateGLWindow("Piotr Cieslak & NeHe's Morphing Points Tutorial",640,480,16,fullscreen))
    {
        return 0;								// Quit If Window Was Not Created
    }

    while(!done)									// Loop That Runs While done=FALSE
    {
        if (PeekMessage(&msg,NULL,0,0,PM_REMOVE))				// Is There A Message Waiting?
        {
            if (msg.message==WM_QUIT)					// Have We Received A Quit Message?
            {
                done=TRUE;						// If So done=TRUE
            }
            else								// If Not, Deal With Window Messages
            {
                TranslateMessage(&msg);					// Translate The Message
                DispatchMessage(&msg);					// Dispatch The Message
            }
        }
        else									// If There Are No Messages
        {
            // Draw The Scene.  Watch For ESC Key And Quit Messages From DrawGLScene()
            if (active && keys[VK_ESCAPE])					// Active?  Was There A Quit Received?
            {
                done=TRUE;						// ESC or DrawGLScene Signaled A Quit
            }
            else								// Not Time To Quit, Update Screen
            {
                DrawGLScene();						// Draw The Scene (Don't Draw When Inactive 1% CPU Use)
                SwapBuffers(hDC);					// Swap Buffers (Double Buffering)
The code below watches for key presses. By now you should understand the code fairly easily. If page up is pressed we increase zspeed. This causes the object to spin faster on the z axis in a positive direction.

If page down is pressed we decrease zspeed. This causes the object to spin faster on the z axis in a negative direction.

If the down arrow is pressed we increase xspeed. This causes the object to spin faster on the x axis in a positive direction.

If the up arrow is pressed we decrease xspeed. This causes the object to spin faster on the x axis in a negative direction.

If the right arrow is pressed we increase yspeed. This causes the object to spin faster on the y axis in a positive direction.

If the left arrow is pressed we decrease yspeed. This causes the object to spin faster on the y axis in a negative direction.
                if(keys[VK_PRIOR])					// Is Page Up Being Pressed?
                    zspeed+=0.01f;					// Increase zspeed

                if(keys[VK_NEXT])					// Is Page Down Being Pressed?
                    zspeed-=0.01f;					// Decrease zspeed

                if(keys[VK_DOWN])					// Is Page Up Being Pressed?
                    xspeed+=0.01f;					// Increase xspeed

                if(keys[VK_UP])						// Is Page Up Being Pressed?
                    xspeed-=0.01f;					// Decrease xspeed

                if(keys[VK_RIGHT])					// Is Page Up Being Pressed?
                    yspeed+=0.01f;					// Increase yspeed

                if(keys[VK_LEFT])					// Is Page Up Being Pressed?
                    yspeed-=0.01f;					// Decrease yspeed
The following keys physically move the object. 'Q' moves it into the screen, 'Z' moves it towards the viewer, 'W' moves the object up, 'S' moves it down, 'D' moves it right, and 'A' moves it left.
                if (keys['Q'])						// Is Q Key Being Pressed?
                 cz-=0.01f;						// Move Object Away From Viewer

                if (keys['Z'])						// Is Z Key Being Pressed?
                 cz+=0.01f;						// Move Object Towards Viewer

                if (keys['W'])						// Is W Key Being Pressed?
                 cy+=0.01f;						// Move Object Up

                if (keys['S'])						// Is S Key Being Pressed?
                 cy-=0.01f;						// Move Object Down

                if (keys['D'])						// Is D Key Being Pressed?
                 cx+=0.01f;						// Move Object Right

                if (keys['A'])						// Is A Key Being Pressed?
                 cx-=0.01f;						// Move Object Left
Now we watch to see if keys 1 through 4 are pressed. If 1 is pressed and key is not equal to 1 (not the current object already) and morph is false (not already in the process of morphing), we set key to 1, so that our program knows we just selected object 1. We then set morph to TRUE, letting our program know it's time to start morphing, and last we set the destination object (dest) to equal object 1 (morph1).

Pressing keys 2, 3, and 4 does the same thing. If 2 is pressed we set dest to morph2, and we set key to equal 2. Pressing 3, sets dest to morph3 and key to 3.

By setting key to the value of the key we just pressed on the keyboard, we prevent the user from trying to morph from a sphere to a sphere or a cone to a cone!
                if (keys['1'] && (key!=1) && !morph)			// Is 1 Pressed, key Not Equal To 1 And Morph False?
                {
                    key=1;						// Sets key To 1 (To Prevent Pressing 1 2x In A Row)
                    morph=TRUE;					// Set morph To True (Starts Morphing Process)
                    dest=&morph1;					// Destination Object To Morph To Becomes morph1
                }
                if (keys['2'] && (key!=2) && !morph)			// Is 2 Pressed, key Not Equal To 2 And Morph False?
                {
                    key=2;						// Sets key To 2 (To Prevent Pressing 2 2x In A Row)
                    morph=TRUE;					// Set morph To True (Starts Morphing Process)
                    dest=&morph2;					// Destination Object To Morph To Becomes morph2
                }
                if (keys['3'] && (key!=3) && !morph)			// Is 3 Pressed, key Not Equal To 3 And Morph False?
                {
                    key=3;						// Sets key To 3 (To Prevent Pressing 3 2x In A Row)
                    morph=TRUE;					// Set morph To True (Starts Morphing Process)
                    dest=&morph3;					// Destination Object To Morph To Becomes morph3
                }
                if (keys['4'] && (key!=4) && !morph)			// Is 4 Pressed, key Not Equal To 4 And Morph False?
                {
                    key=4;						// Sets key To 4 (To Prevent Pressing 4 2x In A Row)
                    morph=TRUE;					// Set morph To True (Starts Morphing Process)
                    dest=&morph4;					// Destination Object To Morph To Becomes morph4
                }
Finally we watch to see if F1 is pressed if it is we toggle from Fullscreen to Windowed mode or Windowed mode to Fullscreen mode!
                if (keys[VK_F1])					// Is F1 Being Pressed?
                {
                    keys[VK_F1]=FALSE;				// If So Make Key FALSE
                    KillGLWindow();					// Kill Our Current Window
                    fullscreen=!fullscreen;				// Toggle Fullscreen / Windowed Mode
                    // Recreate Our OpenGL Window
                    if (!CreateGLWindow("Piotr Cieslak & NeHe's Morphing Points Tutorial",640,480,16,fullscreen))
                    {
                        return 0;				// Quit If Window Was Not Created
                    }
                }
            }
        }
    }

    // Shutdown
    KillGLWindow();									// Kill The Window
    return (msg.wParam);								// Exit The Program
}
I hope you have enjoyed this tutorial. Although it's not an incredibly complex tutorial, you can learn alot from the code! The animation in my dolphin demo is done in a similar way to the morphing in this demo. By playing around with the code you can come up with some really cool effects. Dots turning into words. Faked animation, and more! You may even want to try using solid polygons or lines instead of dots. The effect can be quite impressive!

Piotr's code is new and refreshing. I hope that after reading through this tutorial you have a better understanding on how to store and load object data from a file, and how to manipulate the data to create cool GL effects in your own programs! The .html for this tutorial took 3 days to write. If you notice any mistakes please let me know. Alot of it was written late at night, meaning a few mistakes may have crept in. I want these tutorials to be the best they can be. Feedback is appreciated!

Piotr Cieslak - Code
Jeff Molofee (NeHe) - HTML / Modifications


Jeff Molofee's OpenGL Windows Tutorial #27 (by Banu Cosmin)

Lesson 27
Welcome to another exciting tutorial. The code for this tutorial was written by Banu Cosmin. The tutorial was of course written by myself (NeHe). In this tutorial you will learn how to create EXTREMELY realistic reflections. Nothing fake here! The objects being reflected will not show up underneath the floor or on the other side of a wall. True reflections!

A very important thing to note about this tutorial: Because the Voodoo 1, 2 and some other cards do not support the stencil buffer, this demo will NOT run on those cards. It will ONLY run on cards that support the stencil buffer. If you're not sure if your card supports the stencil buffer, download the code, and try running the demo. Also, this demo requires a fairly decent processor and graphics card. Even on my GeForce I notice there is a little slow down at times. This demo runs best in 32 bit color mode!

As video cards get better, and processors get faster, I can see the stencil buffer becoming more popular. If you have the hardware and you're ready to reflect, read on!

The first part of the code is fairly standard. We include all necessary header files, and set up our Device Context, Rendering Context, etc.
#include	<windows.h>							// Header File For Windows
#include	<gl\gl.h>							// Header File For The OpenGL32 Library
#include	<gl\glu.h>							// Header File For The GLu32 Library
#include	<gl\glaux.h>							// Header File For The Glaux Library
#include	<stdio.h>							// Header File For Standard Input / Output

HDC		hDC=NULL;							// Private GDI Device Context
HGLRC		hRC=NULL;							// Permanent Rendering Context
HWND		hWnd=NULL;							// Holds Our Window Handle
HINSTANCE	hInstance = NULL;						// Holds The Instance Of The Application
Next we have the standard variables to keep track of key presses (keys[ ]), whether or not the program is active (active), and if we should use fullscreen mode or windowed mode (fullscreen).
bool		keys[256];							// Array Used For The Keyboard Routine
bool		active=TRUE;							// Window Active Flag Set To TRUE By Default
bool		fullscreen=TRUE;						// Fullscreen Flag Set To Fullscreen Mode By Default
Next we set up our lighting variables. LightAmb[ ] will set our ambient light. We will use 70% red, 70% green and 70% blue, creating a light that is 70% bright white. LightDif[ ] will set the diffuse lighting (the amount of light evenly reflected off the surface of our object). In this case we want to reflect full intensity light. Lastly we have LightPos[ ] which will be used to position our light. In this case we want the light 4 units to the right, 4 units up, and 6 units towards the viewer. If we could actually see the light, it would be floating in front of the top right corner of our screen.
// Light Parameters
static GLfloat	LightAmb[] = {0.7f, 0.7f, 0.7f, 1.0f};				// Ambient Light
static GLfloat	LightDif[] = {1.0f, 1.0f, 1.0f, 1.0f};				// Diffuse Light
static GLfloat	LightPos[] = {4.0f, 4.0f, 6.0f, 1.0f};				// Light Position
We set up a variable called q for our quadratic object, xrot and yrot to keep track of rotation. xrotspeed and yrotspeed control the speed our object rotates at. zoom is used to zoom in and out of the scene (we start at -7 which shows us the entire scene) and height is the height of the ball above the floor.

We then make room for our 3 textures with texture[3], and define WndProc().
GLUquadricObj	*q;								// Quadratic For Drawing A Sphere

GLfloat		xrot		=  0.0f;					// X Rotation
GLfloat		yrot		=  0.0f;					// Y Rotation
GLfloat		xrotspeed	=  0.0f;					// X Rotation Speed
GLfloat		yrotspeed	=  0.0f;					// Y Rotation Speed
GLfloat		zoom		= -7.0f;					// Depth Into The Screen
GLfloat		height		=  2.0f;					// Height Of Ball From Floor

GLuint		texture[3];							// 3 Textures

LRESULT	CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);				// Declaration For WndProc
The ReSizeGLScene() and LoadBMP() code has not changed so I will skip over both sections of code.
GLvoid ReSizeGLScene(GLsizei width, GLsizei height)				// Resize And Initialize The GL Window

AUX_RGBImageRec *LoadBMP(char *Filename)					// Loads A Bitmap Image
The load texture code is pretty standard. You've used it many times before in the previous tutorials. We make room for 3 textures, then we load the three images, and create linear filtered textures from the image data. The bitmap files we use are located in the DATA directory.
int LoadGLTextures()								// Load Bitmaps And Convert To Textures
{
    int Status=FALSE;								// Status Indicator
    AUX_RGBImageRec *TextureImage[3];						// Create Storage Space For The Textures
    memset(TextureImage,0,sizeof(void *)*3);					// Set The Pointer To NULL
    if ((TextureImage[0]=LoadBMP("Data/EnvWall.bmp")) &&			// Load The Floor Texture
        (TextureImage[1]=LoadBMP("Data/Ball.bmp")) &&				// Load the Light Texture
        (TextureImage[2]=LoadBMP("Data/EnvRoll.bmp")))				// Load the Wall Texture
    {
        Status=TRUE;							// Set The Status To TRUE
        glGenTextures(3, &texture[0]);					// Create The Texture
        for (int loop=0; loop<3; loop++)				// Loop Through 5 Textures
        {
            glBindTexture(GL_TEXTURE_2D, texture[loop]);
            glTexImage2D(GL_TEXTURE_2D, 0, 3, TextureImage[loop]->sizeX, TextureImage[loop]->sizeY, 0, GL_RGB, GL_UNSIGNED_BYTE, TextureImage[loop]->data);
            glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
            glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
        }
        for (loop=0; loop<3; loop++)					// Loop Through 5 Textures
        {
            if (TextureImage[loop])					// If Texture Exists
            {
                if (TextureImage[loop]->data)			// If Texture Image Exists
                {
                    free(TextureImage[loop]->data);		// Free The Texture Image Memory
                }
                free(TextureImage[loop]);			// Free The Image Structure
            }
        }
    }
    return Status;								// Return The Status
}
A new command called glClearStencil is introduced in the init code. Passing 0 as a parameter tells OpenGL to disable clearing of the stencil buffer. You should be familiar with the rest of the code by now. We load our textures and enable smooth shading. The clear color is set to an off blue and the clear depth is set to 1.0f. The stencil clear value is set to 0. We enable depth testing, and set the depth test value to less than or equal to. Our perspective correction is set to nicest (very good quality) and 2d texture mapping is enabled.
int InitGL(GLvoid)								// All Setup For OpenGL Goes Here
{
    if (!LoadGLTextures())							// If Loading The Textures Failed
    {
        return FALSE;							// Return False
    }
    glShadeModel(GL_SMOOTH);						// Enable Smooth Shading
    glClearColor(0.2f, 0.5f, 1.0f, 1.0f);					// Background
    glClearDepth(1.0f);							// Depth Buffer Setup
    glClearStencil(0);							// Clear The Stencil Buffer To 0
    glEnable(GL_DEPTH_TEST);						// Enables Depth Testing
    glDepthFunc(GL_LEQUAL);							// The Type Of Depth Testing To Do
    glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);			// Really Nice Perspective Calculations
    glEnable(GL_TEXTURE_2D);						// Enable 2D Texture Mapping
Now it's time to set up light 0. The first line below tells OpenGL to use the values stored in LightAmb for the Ambient light. If you remember at the beginning of the code, the rgb values of LightAmb were all 0.7f, giving us a white light at 70% full intensity. We then set the Diffuse light using the values stored in LightDif and position the light using the x,y,z values stored in LightPos.

After we have set the light up we can enable it with glEnable(GL_LIGHT0). Even though the light is enabled, you will not see it until we enable lighting with the last line of code.

Note: If we wanted to turn off all lights in a scene we would use glDisable(GL_LIGHTING). If we wanted to disable just one of our lights we would use glDisable(GL_LIGHT{0-7}). This gives us alot of control over the lighting and what lights are on and off. Just remember if GL_LIGHTING is disabled, you will not see lights!
    glLightfv(GL_LIGHT0, GL_AMBIENT, LightAmb);				// Set The Ambient Lighting For Light0
    glLightfv(GL_LIGHT0, GL_DIFFUSE, LightDif);				// Set The Diffuse Lighting For Light0
    glLightfv(GL_LIGHT0, GL_POSITION, LightPos);				// Set The Position For Light0

    glEnable(GL_LIGHT0);							// Enable Light 0
    glEnable(GL_LIGHTING);							// Enable Lighting
In the first line below, we create a new quadratic object. The second line tells OpenGL to generate smooth normals for our quadratic object, and the third line tells OpenGL to generate texture coordinates for our quadratic. Without the second and third lines of code, our object would use flat shading and we wouldn't be able to texture it.

The fourth and fifth lines tell OpenGL to use the Sphere Mapping algorithm to generate the texture coordinates. This allows us to sphere map the quadratic object.
    q = gluNewQuadric();							// Create A New Quadratic
    gluQuadricNormals(q, GL_SMOOTH);					// Generate Smooth Normals For The Quad
    gluQuadricTexture(q, GL_TRUE);						// Enable Texture Coords For The Quad

    glTexGeni(GL_S, GL_TEXTURE_GEN_MODE, GL_SPHERE_MAP);			// Set Up Sphere Mapping
    glTexGeni(GL_T, GL_TEXTURE_GEN_MODE, GL_SPHERE_MAP);			// Set Up Sphere Mapping

    return TRUE;								// Initialization Went OK
}
The code below will draw our object (which is a cool looking environment mapped beach ball).

We set the color to full intensity white and bind to our BALL texture (the ball texture is a series of red, white and blue stripes).

After selecting our texture, we draw a Quadratic Sphere with a radius of 0.35f, 32 slices and 16 stacks (up and down).
void DrawObject()								// Draw Our Ball
{
    glColor3f(1.0f, 1.0f, 1.0f);						// Set Color To White
    glBindTexture(GL_TEXTURE_2D, texture[1]);				// Select Texture 2 (1)
    gluSphere(q, 0.35f, 32, 16);						// Draw First Sphere
After drawing the first sphere, we select a new texture (EnvRoll), set the alpha value to 40% and enable blending based on the source alpha value. glEnable(GL_TEXTURE_GEN_S) and glEnable(GL_TEXTURE_GEN_T) enables sphere mapping.

After doing all that, we redraw the sphere, disable sphere mapping and disable blending.

The final result is a reflection that almost looks like bright points of light mapped to the beach ball. Because we enable sphere mapping, the texture is always facing the viewer, even as the ball spins. We blend so that the new texture doesn't cancel out the old texture (a form of multitexturing).
    glBindTexture(GL_TEXTURE_2D, texture[2]);				// Select Texture 3 (2)
    glColor4f(1.0f, 1.0f, 1.0f, 0.4f);					// Set Color To White With 40% Alpha
    glEnable(GL_BLEND);							// Enable Blending
    glBlendFunc(GL_SRC_ALPHA, GL_ONE);					// Set Blending Mode To Mix Based On SRC Alpha
    glEnable(GL_TEXTURE_GEN_S);						// Enable Sphere Mapping
    glEnable(GL_TEXTURE_GEN_T);						// Enable Sphere Mapping

    gluSphere(q, 0.35f, 32, 16);						// Draw Another Sphere Using New Texture
                                        // Textures Will Mix Creating A MultiTexture Effect (Reflection)
    glDisable(GL_TEXTURE_GEN_S);						// Disable Sphere Mapping
    glDisable(GL_TEXTURE_GEN_T);						// Disable Sphere Mapping
    glDisable(GL_BLEND);							// Disable Blending
}
The code below draws the floor that our ball hovers over. We select the floor texture (EnvWall), and draw a single texture mapped quad on the z-axis. Pretty simple!
void DrawFloor()								// Draws The Floor
{
    glBindTexture(GL_TEXTURE_2D, texture[0]);				// Select Texture 1 (0)
    glBegin(GL_QUADS);							// Begin Drawing A Quad
        glNormal3f(0.0, 1.0, 0.0);					// Normal Pointing Up
        glTexCoord2f(0.0f, 1.0f);					// Bottom Left Of Texture
        glVertex3f(-2.0, 0.0, 2.0);					// Bottom Left Corner Of Floor

        glTexCoord2f(0.0f, 0.0f);					// Top Left Of Texture
        glVertex3f(-2.0, 0.0,-2.0);					// Top Left Corner Of Floor

        glTexCoord2f(1.0f, 0.0f);					// Top Right Of Texture
        glVertex3f( 2.0, 0.0,-2.0);					// Top Right Corner Of Floor

        glTexCoord2f(1.0f, 1.0f);					// Bottom Right Of Texture
        glVertex3f( 2.0, 0.0, 2.0);					// Bottom Right Corner Of Floor
    glEnd();								// Done Drawing The Quad
}
Now for the fun stuff. Here's where we combine all the objects and images to create our reflective scene.

We start off by clearing the screen (GL_COLOR_BUFFER_BIT) to our default clear color (off blue). The depth (GL_DEPTH_BUFFER_BIT) and stencil (GL_STENCIL_BUFFER_BIT) buffers are also cleared. Make sure you include the stencil buffer code, it's new and easy to overlook! It's important to note when we clear the stencil buffer, we are filling it with 0's.

After clearing the screen and buffers, we define our clipping plane equation. The plane equation is used for clipping the reflected image.

The equation eqr[]={0.0f,-1.0f, 0.0f, 0.0f} will be used when we draw the reflected image. As you can see, the value for the y-plane is a negative value. Meaning we will only see pixels if they are drawn below the floor or at a negative value on the y-axis. Anything drawn above the floor will not show up when using this equation.

More on clipping later... read on.
int DrawGLScene(GLvoid)								// Draw Everything
{
    // Clear Screen, Depth Buffer & Stencil Buffer
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT);

    // Clip Plane Equations
    double eqr[] = {0.0f,-1.0f, 0.0f, 0.0f};				// Plane Equation To Use For The Reflected Objects
So we have cleared the screen, and defined our clipping planes. Now for the fun stuff!

We start off by resetting the modelview matrix. Which of course starts all drawing in the center of the screen. We then translate down 0.6f units (to add a small perspective tilt to the floor) and into the screen based on the value of zoom. To better explain why we translate down 0.6f units, I'll explain using a simple example. If you were looking at the side of a piece of paper at exactly eye level, you would barely be able to see it. It would more than likely look like a thin line. If you moved the paper down a little, it would no longer look like a line. You would see more of the paper, because your eyes would be looking down at the page instead of directly at the edge of the paper.
    glLoadIdentity();							// Reset The Modelview Matrix
    glTranslatef(0.0f, -0.6f, zoom);					// Zoom And Raise Camera Above The Floor (Up 0.6 Units)
Next we set the color mask. Something new to this tutorial! The 4 values for color mask represent red, green, blue and alpha. By default all the values are set to GL_TRUE.

If the red value of glColorMask({red},{green},{blue},{alpha}) was set to GL_TRUE, and all of the other values were 0 (GL_FALSE), the only color that would show up on the screen is red. If the value for red was 0 (GL_FALSE), but the other values were all GL_TRUE, every color except red would be drawn to the screen.

We don't want anything drawn to the screen at the moment, with all of the values set to 0 (GL_FALSE), colors will not be drawn to the screen.
    glColorMask(0,0,0,0);							// Set Color Mask
Now even more fun stuff... Setting up the stencil buffer and stencil testing!

We start off by enabling stencil testing. Once stencil testing has been enabled, we are able to modify the stencil buffer.

It's very hard to explain the commands below so please bear with me, and if you have a better explanation, please let me know. In the code below we set up a test. The line glStencilFunc(GL_ALWAYS, 1, 1) tells OpenGL what type of test we want to do on each pixel when an object is drawn to the screen.

GL_ALWAYS just tells OpenGL the test will always pass. The second parameter (1) is a reference value that we will test in the third line of code, and the third parameter is a mask. The mask is a value that is ANDed with the reference value and stored in the stencil buffer when the test is done. A reference value of 1 ANDed with a mask value of 1 is 1. So if the test goes well and we tell OpenGL to, it will place a one in the stencil buffer (reference&mask=1).

Quick note: Stencil testing is a per pixel test done each time an object is drawn to the screen. The reference value ANDed with the mask value is tested against the current stencil value ANDed with the mask value.

The third line of code tests for three different conditions based on the stencil function we decided to use. The first two parameters are GL_KEEP, and the third is GL_REPLACE.

The first parameter tells OpenGL what to do if the test fails. Because the first parameter is GL_KEEP, if the test fails (which it can't because we have the funtion set to GL_ALWAYS), we would leave the stencil value set at whatever it currently is.

The second parameter tells OpenGL what do do if the stencil test passes, but the depth test fails. In the code below, we eventually disable depth testing so this parameter can be ignored.

The third parameter is the important one. It tells OpenGL what to do if the test passes! In our code we tell OpenGL to replace (GL_REPLACE) the value in the stencil buffer. The value we put into the stencil buffer is our reference value ANDed with our mask value which is 1.

After setting up the type of testing we want to do, we disable depth testing and jump to the code that draws our floor.

In simple english I will try to sum up everything that the code does up until now...

We tell OpenGL not to draw any colors to the screen. This means that when we draw the floor, it wont show up on the screen. BUT... each spot on the screen where the object (our floor) should be if we could see it will be tested based on the type of stencil testing we decide to do. The stencil buffer starts out full of 0's (empty). We want to set the stencil value to 1 wherever our object would have been drawn if we could see it. So we tell OpenGL we don't care about testing. If a pixel should have been drawn to the screen, we want that spot marked with a 1. GL_ALWAYS does exactly that. Our reference and mask values of 1 make sure that the value placed into the stencil buffer is indeed going to be 1! As we invisibly draw, our stencil operation checks each pixel location, and replaces the 0 with a 1.
    glEnable(GL_STENCIL_TEST);						// Enable Stencil Buffer For "marking" The Floor
    glStencilFunc(GL_ALWAYS, 1, 1);						// Always Passes, 1 Bit Plane, 1 As Mask
    glStencilOp(GL_KEEP, GL_KEEP, GL_REPLACE);				// We Set The Stencil Buffer To 1 Where We Draw Any Polygon
                                        // Keep If Test Fails, Keep If Test Passes But Buffer Test Fails
                                        // Replace If Test Passes
    glDisable(GL_DEPTH_TEST);						// Disable Depth Testing
    DrawFloor();								// Draw The Floor (Draws To The Stencil Buffer)
                                        // We Only Want To Mark It In The Stencil Buffer
So now we have an invisible stencil mask of the floor. As long as stencil testing is enabled, the only places pixels will show up are places where the stencil buffer has a value of 1. All of the pixels on the screen where the invisible floor was drawn will have a stencil value of 1. Meaning as long as stencil testing is enabled, the only pixels that we will see are the pixels that we draw in the same spot our invisible floor was defined in the stencil buffer. The trick behind creating a real looking reflection that reflects in the floor and nowhere else!

So now that we know the ball reflection will only be drawn where the floor should be, it's time to draw the reflection! We enable depth testing, and set the color mask back to all ones (meaning all the colors will be drawn to the screen).

Instead of using GL_ALWAYS for our stencil function we are going to use GL_EQUAL. We'll leave the reference and mask values at 1. For the stencil operation we will set all the parameters to GL_KEEP. In english, any object we draw this time around will actually appear on the screen (because the color mask is set to true for each color). As long as stencil testing is enabled pixels will ONLY be drawn if the stencil buffer has a value of 1 (reference value ANDed with the mask, which is 1 EQUALS (GL_EQUAL) the stencil buffer value ANDed with the mask, which is also 1). If the stencil value is not 1 where the current pixel is being drawn it will not show up! GL_KEEP just tells OpenGL not to modify any values in the stencil buffer if the test passes OR fails!
    glEnable(GL_DEPTH_TEST);						// Enable Depth Testing
    glColorMask(1,1,1,1);							// Set Color Mask to TRUE, TRUE, TRUE, TRUE
    glStencilFunc(GL_EQUAL, 1, 1);						// We Draw Only Where The Stencil Is 1
                                        // (I.E. Where The Floor Was Drawn)
    glStencilOp(GL_KEEP, GL_KEEP, GL_KEEP);					// Don't Change The Stencil Buffer
Now we enable the mirrored clipping plane. This plane is defined by eqr, and only allows object to be drawn from the center of the screen (where the floor is) down to the bottom of the screen (any negative value on the y-axis). That way the reflected ball that we draw can't come up through the center of the floor. That would look pretty bad if it did. If you don't understand what I mean, remove the first line below from the source code, and move the real ball (non reflected) through the floor. If clipping is not enabled, you will see the reflected ball pop out of the floor as the real ball goes into the floor.

After we enable clipping plane0 (usually you can have from 0-5 clipping planes), we define the plane by telling it to use the parameters stored in eqr.

We push the matrix (which basically saves the position of everything on the screen) and use glScalef(1.0f,-1.0f,1.0f) to flip the object upside down (creating a real looking reflection). Setting the y value of glScalef({x},{y},{z}) to a negative value forces OpenGL to render opposite on the y-axis. It's almost like flipping the entire screen upside down. When position an object at a positive value on the y-axis, it will appear at the bottom of the screen instead of at the top. When you rotate an object towards yourself, it will rotate away from you. Everything will be mirrored on the y-axis until you pop the matrix or set the y value back to 1.0f instead of -1.0f using glScalef({x},{y},{z}).
    glEnable(GL_CLIP_PLANE0);						// Enable Clip Plane For Removing Artifacts
                                        // (When The Object Crosses The Floor)
    glClipPlane(GL_CLIP_PLANE0, eqr);					// Equation For Reflected Objects
    glPushMatrix();								// Push The Matrix Onto The Stack
        glScalef(1.0f, -1.0f, 1.0f);					// Mirror Y Axis
The first line below positions our light to the location specified by LightPos. The light should shine on the bottom right of the reflected ball creating a very real looking light source. The position of the light is also mirrored. On the real ball (ball above the floor) the light is positioned at the top right of your screen, and shines on the top right of the real ball. When drawing the reflected ball, the light is positioned at the bottom right of your screen.

We then move up or down on the y-axis to the value specified by height. Translations are mirrored, so if the value of height is 5.0f, the position we translate to will be mirrored (-5.0f). Positioning the reflected image under the floor, instead of above the floor!

After position our reflected ball, we rotate the ball on both the x axis and y axis, based on the values of xrot and yrot. Keep in mind that any rotations on the x axis will also be mirrored. So if the real ball (ball above the floor) is rolling towards you on the x-axis, it will be rolling away from you in the reflection.

After positioning the reflected ball and doing our rotations we draw the ball by calling DrawObject(), and pop the matrix (restoring things to how they were before we drew the ball). Popping the matrix all cancels mirroring on the y-axis.

We then disable our clipping plane (plane0) so that we are not stuck drawing only to the bottom half of the screen, and last, we disable stencil testing so that we can draw to other spots on the screen other than where the floor should be.

Note that we draw the reflected ball before we draw the floor. I'll explain why later on.
        glLightfv(GL_LIGHT0, GL_POSITION, LightPos);			// Set Up Light0
        glTranslatef(0.0f, height, 0.0f);				// Position The Object
        glRotatef(xrot, 1.0f, 0.0f, 0.0f);				// Rotate Local Coordinate System On X Axis
        glRotatef(yrot, 0.0f, 1.0f, 0.0f);				// Rotate Local Coordinate System On Y Axis
        DrawObject();							// Draw The Sphere (Reflection)
    glPopMatrix();								// Pop The Matrix Off The Stack
    glDisable(GL_CLIP_PLANE0);						// Disable Clip Plane For Drawing The Floor
    glDisable(GL_STENCIL_TEST);						// We Don't Need The Stencil Buffer Any More (Disable)
We start off this section of code by positioning our light. The y-axis is no longer being mirrored so drawing the light this time around will position it at the top of the screen instead of the bottom right of the screen.

We enable blending, disable lighting, and set the alpha value to 80% using the command glColor4f(1.0f,1.0f,1.0f,0.8f). The blending mode is set up using glBlendFunc(), and the semi transparent floor is drawn over top of the reflected ball.

If we drew the floor first and then the reflected ball, the effect wouldn't look very good. By drawing the ball and then the floor, you can see a small amount of coloring from the floor mixed into the coloring of the ball. If I was looking into a BLUE mirror, I would expect the reflection to look a little blue. By rendering the ball first, the reflected image looks like it's tinted the color of the floor.
    glLightfv(GL_LIGHT0, GL_POSITION, LightPos);				// Set Up Light0 Position
    glEnable(GL_BLEND);							// Enable Blending (Otherwise The Reflected Object Wont Show)
    glDisable(GL_LIGHTING);							// Since We Use Blending, We Disable Lighting
    glColor4f(1.0f, 1.0f, 1.0f, 0.8f);					// Set Color To White With 80% Alpha
    glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);			// Blending Based On Source Alpha And 1 Minus Dest Alpha
    DrawFloor();								// Draw The Floor To The Screen
Now we draw the 'real' ball (the one that floats above the floor). We disabled lighting when we drew the floor, but now it's time to draw another ball so we will turn lighting back on.

We don't need blending anymore so we disable blending. If we didn't disable blending, the colors from the floor would mix with the colors of our 'real' ball when it was floating over top of the floor. We don't want the 'real' ball to look like the reflection so we disable blending.

We are not going to clip the actual ball. If the real ball goes through the floor, we should see it come out the bottom. If we were using clipping the ball wouldn't show up after it went through the floor. If you didn't want to see the ball come through the floor, you would set up a clipping equation that set the Y value to +1.0f, then when the ball went through the floor, you wouldn't see it (you would only see the ball when it was drawn on at a positive value on the y-axis. For this demo, there's no reason we shouldn't see it come through the floor.

We then translate up or down on the y-axis to the position specified by height. Only this time the y-axis is not mirrored, so the ball travels the opposite direction that the reflected image travels. If we move the 'real' ball down the reflected ball will move up. If we move the 'real' ball up, the reflected ball will move down.

We rotate the 'real' ball, and again, because the y-axis is not mirrored, the ball will spin the opposite direction of the reflected ball. If the reflected ball is rolling towards you the 'real' ball will be rolling away from you. This creates the illusion of a real reflection.

After positioning and rotating the ball, we draw the 'real' ball by calling DrawObject().
    glEnable(GL_LIGHTING);							// Enable Lighting
    glDisable(GL_BLEND);							// Disable Blending
    glTranslatef(0.0f, height, 0.0f);					// Position The Ball At Proper Height
    glRotatef(xrot, 1.0f, 0.0f, 0.0f);					// Rotate On The X Axis
    glRotatef(yrot, 0.0f, 1.0f, 0.0f);					// Rotate On The Y Axis
    DrawObject();								// Draw The Ball
The following code rotates the ball on the x and y axis. By increasing xrot by xrotspeed we rotate the ball on the x-axis. By increasing yrot by yrotspeed we spin the ball on the y-axis. If xrotspeed is a very high value in the positive or negative direction the ball will spin quicker than if xrotspeed was a low value, closer to 0.0f. Same goes for yrotspeed. The higher the value, the faster the ball spins on the y-axis.

Before we return TRUE, we do a glFlush(). This tells OpenGL to render everything left in the GL pipeline before continuing, and can help prevent flickering on slower video cards.
    xrot += xrotspeed;							// Update X Rotation Angle By xrotspeed
    yrot += yrotspeed;							// Update Y Rotation Angle By yrotspeed
    glFlush();								// Flush The GL Pipeline
    return TRUE;								// Everything Went OK
}
The following code will watch for key presses. The first 4 lines check to see if you are pressing one of the 4 arrow keys. If you are, the ball is spun right, left, down or up.

The next 2 lines check to see if you are pressing the 'A' or 'Z' keys. Pressing 'A' will zoom you in closer to the ball and pressing 'Z' will zoom you away from the ball.

Pressing 'PAGE UP' will increase the value of height moving the ball up, and pressing 'PAGE DOWN' will decrease the value of height moving the ball down (closer to the floor).
void ProcessKeyboard()								// Process Keyboard Results
{
    if (keys[VK_RIGHT])	yrotspeed += 0.08f;				// Right Arrow Pressed (Increase yrotspeed)
    if (keys[VK_LEFT])	yrotspeed -= 0.08f;				// Left Arrow Pressed (Decrease yrotspeed)
    if (keys[VK_DOWN])	xrotspeed += 0.08f;				// Down Arrow Pressed (Increase xrotspeed)
    if (keys[VK_UP])	xrotspeed -= 0.08f;				// Up Arrow Pressed (Decrease xrotspeed)

    if (keys['A'])		zoom +=0.05f;					// 'A' Key Pressed ... Zoom In
    if (keys['Z'])		zoom -=0.05f;					// 'Z' Key Pressed ... Zoom Out

    if (keys[VK_PRIOR])	height +=0.03f;					// Page Up Key Pressed Move Ball Up
    if (keys[VK_NEXT])	height -=0.03f;					// Page Down Key Pressed Move Ball Down
}
The KillGLWindow() code hasn't changed, so I'll skip over it.
GLvoid KillGLWindow(GLvoid)							// Properly Kill The Window
You can skim through the following code. Even though only one line of code has changed in CreateGLWindow(), I have included all of the code so it's easier to follow through the tutorial.
BOOL CreateGLWindow(char* title, int width, int height, int bits, bool fullscreenflag)
{
    GLuint		PixelFormat;						// Holds The Results After Searching For A Match
    WNDCLASS	wc;							// Windows Class Structure
    DWORD		dwExStyle;						// Window Extended Style
    DWORD		dwStyle;						// Window Style

    fullscreen=fullscreenflag;						// Set The Global Fullscreen Flag

    hInstance		= GetModuleHandle(NULL);			// Grab An Instance For Our Window
    wc.style		= CS_HREDRAW | CS_VREDRAW | CS_OWNDC;		// Redraw On Size, And Own DC For Window
    wc.lpfnWndProc		= (WNDPROC) WndProc;				// WndProc Handles Messages
    wc.cbClsExtra		= 0;						// No Extra Window Data
    wc.cbWndExtra		= 0;						// No Extra Window Data
    wc.hInstance		= hInstance;					// Set The Instance
    wc.hIcon		= LoadIcon(NULL, IDI_WINLOGO);			// Load The Default Icon
    wc.hCursor		= LoadCursor(NULL, IDC_ARROW);			// Load The Arrow Pointer
    wc.hbrBackground	= NULL;						// No Background Required For GL
    wc.lpszMenuName		= NULL;						// We Don't Want A Menu
    wc.lpszClassName	= "OpenGL";					// Set The Class Name

    if (!RegisterClass(&wc))						// Attempt To Register The Window Class
    {
        MessageBox(NULL,"Failed To Register The Window Class.","ERROR",MB_OK|MB_ICONEXCLAMATION);
        return FALSE;							// Return FALSE
    }

    if (fullscreen)								// Attempt Fullscreen Mode?
    {
        DEVMODE dmScreenSettings;					// Device Mode
        memset(&dmScreenSettings,0,sizeof(dmScreenSettings));		// Makes Sure Memory's Cleared
        dmScreenSettings.dmSize=sizeof(dmScreenSettings);		// Size Of The Devmode Structure
        dmScreenSettings.dmPelsWidth	= width;			// Selected Screen Width
        dmScreenSettings.dmPelsHeight	= height;			// Selected Screen Height
        dmScreenSettings.dmBitsPerPel	= bits;				// Selected Bits Per Pixel
        dmScreenSettings.dmFields=DM_BITSPERPEL|DM_PELSWIDTH|DM_PELSHEIGHT;

        // Try To Set Selected Mode And Get Results.  NOTE: CDS_FULLSCREEN Gets Rid Of Start Bar
        if (ChangeDisplaySettings(&dmScreenSettings,CDS_FULLSCREEN)!=DISP_CHANGE_SUCCESSFUL)
        {
            // If The Mode Fails, Offer Two Options.  Quit Or Use Windowed Mode
            if (MessageBox(NULL,"The Requested Fullscreen Mode Is Not Supported By\nYour Video Card. Use Windowed Mode Instead?","NeHe GL",MB_YESNO|MB_ICONEXCLAMATION)==IDYES)
            {
                fullscreen=FALSE;				// Windowed Mode Selected.  Fullscreen = FALSE
            }
            else
            {
                // Pop Up A Message Box Letting User Know The Program Is Closing
                MessageBox(NULL,"Program Will Now Close.","ERROR",MB_OK|MB_ICONSTOP);
                return FALSE;					// Return FALSE
            }
        }
    }

    if (fullscreen)								// Are We Still In Fullscreen Mode?
    {
        dwExStyle=WS_EX_APPWINDOW;					// Window Extended Style
        dwStyle=WS_POPUP | WS_CLIPSIBLINGS | WS_CLIPCHILDREN;		// Windows Style
        ShowCursor(FALSE);						// Hide Mouse Pointer
    }
    else
    {
        dwExStyle=WS_EX_APPWINDOW | WS_EX_WINDOWEDGE;			// Window Extended Style
        dwStyle=WS_OVERLAPPEDWINDOW | WS_CLIPSIBLINGS | WS_CLIPCHILDREN;// Windows Style
    }

    // Create The Window
    if (!(hWnd=CreateWindowEx(	dwExStyle,				// Extended Style For The Window
                    "OpenGL",				// Class Name
                    title,					// Window Title
                    dwStyle,				// Window Style
                    0, 0,					// Window Position
                    width, height,				// Selected Width And Height
                    NULL,					// No Parent Window
                    NULL,					// No Menu
                    hInstance,				// Instance
                    NULL)))					// Dont Pass Anything To WM_CREATE
    {
        KillGLWindow();							// Reset The Display
        MessageBox(NULL,"Window Creation Error.","ERROR",MB_OK|MB_ICONEXCLAMATION);
        return FALSE;							// Return FALSE
    }

    static	PIXELFORMATDESCRIPTOR pfd=					// pfd Tells Windows How We Want Things To Be
    {
        sizeof(PIXELFORMATDESCRIPTOR),					// Size Of This Pixel Format Descriptor
        1,								// Version Number
        PFD_DRAW_TO_WINDOW |						// Format Must Support Window
        PFD_SUPPORT_OPENGL |						// Format Must Support OpenGL
        PFD_DOUBLEBUFFER,						// Must Support Double Buffering
        PFD_TYPE_RGBA,							// Request An RGBA Format
        bits,								// Select Our Color Depth
        0, 0, 0, 0, 0, 0,						// Color Bits Ignored
        0,								// No Alpha Buffer
        0,								// Shift Bit Ignored
        0,								// No Accumulation Buffer
        0, 0, 0, 0,							// Accumulation Bits Ignored
        16,								// 16Bit Z-Buffer (Depth Buffer)
The only change in this section of code is the line below. It is *VERY IMPORTANT* you change the value from 0 to 1 or some other non zero value. In all of the previous tutorials the value of the line below was 0. In order to use Stencil Buffering this value HAS to be greater than or equal to 1. This value is the number of bits you want to use for the stencil buffer.
        1,								// Use Stencil Buffer ( * Important * )
        0,								// No Auxiliary Buffer
        PFD_MAIN_PLANE,							// Main Drawing Layer
        0,								// Reserved
        0, 0, 0								// Layer Masks Ignored
    };

    if (!(hDC=GetDC(hWnd)))							// Did We Get A Device Context?
    {
        KillGLWindow();							// Reset The Display
        MessageBox(NULL,"Can't Create A GL Device Context.","ERROR",MB_OK|MB_ICONEXCLAMATION);
        return FALSE;							// Return FALSE
    }

    if (!(PixelFormat=ChoosePixelFormat(hDC,&pfd)))				// Did Windows Find A Matching Pixel Format?
    {
        KillGLWindow();							// Reset The Display
        MessageBox(NULL,"Can't Find A Suitable PixelFormat.","ERROR",MB_OK|MB_ICONEXCLAMATION);
        return FALSE;							// Return FALSE
    }

    if(!SetPixelFormat(hDC,PixelFormat,&pfd))				// Are We Able To Set The Pixel Format?
    {
        KillGLWindow();							// Reset The Display
        MessageBox(NULL,"Can't Set The PixelFormat.","ERROR",MB_OK|MB_ICONEXCLAMATION);
        return FALSE;							// Return FALSE
    }

    if (!(hRC=wglCreateContext(hDC)))					// Are We Able To Get A Rendering Context?
    {
        KillGLWindow();							// Reset The Display
        MessageBox(NULL,"Can't Create A GL Rendering Context.","ERROR",MB_OK|MB_ICONEXCLAMATION);
        return FALSE;							// Return FALSE
    }

    if(!wglMakeCurrent(hDC,hRC))						// Try To Activate The Rendering Context
    {
        KillGLWindow();							// Reset The Display
        MessageBox(NULL,"Can't Activate The GL Rendering Context.","ERROR",MB_OK|MB_ICONEXCLAMATION);
        return FALSE;							// Return FALSE
    }

    ShowWindow(hWnd,SW_SHOW);						// Show The Window
    SetForegroundWindow(hWnd);						// Slightly Higher Priority
    SetFocus(hWnd);								// Sets Keyboard Focus To The Window
    ReSizeGLScene(width, height);						// Set Up Our Perspective GL Screen

    if (!InitGL())								// Initialize Our Newly Created GL Window
    {
        KillGLWindow();							// Reset The Display
        MessageBox(NULL,"Initialization Failed.","ERROR",MB_OK|MB_ICONEXCLAMATION);
        return FALSE;							// Return FALSE
    }

    return TRUE;								// Success
}
WndProc() has not changed, so we will skip over it.
LRESULT CALLBACK WndProc(	HWND	hWnd,					// Handle For This Window
                UINT	uMsg,					// Message For This Window
                WPARAM	wParam,					// Additional Message Information
                LPARAM	lParam)					// Additional Message Information
Nothing new here. Typical start to WinMain().
int WINAPI WinMain(	HINSTANCE	hInstance,				// Instance
            HINSTANCE	hPrevInstance,				// Previous Instance
            LPSTR		lpCmdLine,				// Command Line Parameters
            int		nCmdShow)				// Window Show State
{
    MSG	msg;								// Windows Message Structure
    BOOL	done=FALSE;							// Bool Variable To Exit Loop

    // Ask The User Which Screen Mode They Prefer
    if (MessageBox(NULL,"Would You Like To Run In Fullscreen Mode?", "Start FullScreen?",MB_YESNO|MB_ICONQUESTION)==IDNO)
    {
        fullscreen=FALSE;						// Windowed Mode
    }
The only real big change in this section of the code is the new window title to let everyone know the tutorial is about reflections using the stencil buffer. Also notice that we pass the resx, resy and resbpp variables to our window creation procedure instead of the usual 640, 480 and 16.
    // Create Our OpenGL Window
    if (!CreateGLWindow("Banu Octavian & NeHe's Stencil & Reflection Tutorial", resx, resy, resbpp, fullscreen))
    {
        return 0;							// Quit If Window Was Not Created
    }

    while(!done)								// Loop That Runs While done=FALSE
    {
        if (PeekMessage(&msg,NULL,0,0,PM_REMOVE))			// Is There A Message Waiting?
        {
            if (msg.message==WM_QUIT)				// Have We Received A Quit Message?
            {
                done=TRUE;					// If So done=TRUE
            }
            else							// If Not, Deal With Window Messages
            {
                TranslateMessage(&msg);				// Translate The Message
                DispatchMessage(&msg);				// Dispatch The Message
            }
        }
        else								// If There Are No Messages
        {
            // Draw The Scene.  Watch For ESC Key And Quit Messages From DrawGLScene()
            if (active)						// Program Active?
            {
                if (keys[VK_ESCAPE])				// Was Escape Pressed?
                {
                    done=TRUE;				// ESC Signalled A Quit
                }
                else						// Not Time To Quit, Update Screen
                {
                    DrawGLScene();				// Draw The Scene
                    SwapBuffers(hDC);			// Swap Buffers (Double Buffering)
Instead of checking for key presses in WinMain(), we jump to our keyboard handling routine called ProcessKeyboard(). Notice the ProcessKeyboard() routine is only called if the program is active!
                    ProcessKeyboard();			// Processed Keyboard Presses
                }
            }
        }
    }

    // Shutdown
    KillGLWindow();								// Kill The Window
    return (msg.wParam);							// Exit The Program
}
I really hope you've enjoyed this tutorial. I know it could use a little more work. It was one of the more difficult tutorials that I have written. It's easy for me to understand what everything is doing, and what commands I need to use to create cool effects, but when you sit down and actually try to explain things keeping in mind that most people have never even heard of the stencil buffer, it's tough! If you notice anything that could be made clearer or if you find any mistakes in the tutorial please let me know. As always, I want this tutorial to be the best it can possibly be, your feedback is greatly appreciated.

Banu Cosmin (Choko) - Code
Jeff Molofee (NeHe) - HTML / Modifications


Jeff Molofee's OpenGL Windows Tutorial #28

Lesson 28
Welcome to a fairly complex tutorial on shadow casting. The effect this demo creates is literally incredible. Shadows that stretch, bend and wrap around other objects and across walls. Everything in the scene can be moved around in 3D space using keys on the keyboard.

This tutorial takes a fairly different approach - It assumes you have a lot of OpenGL knowledge. You should already understand the stencil buffer, and basic OpenGL setup. If you need to brush up, go back and read the earlier tutorials. Functions such as CreateGLWindow and WinMain will NOT be explained in this tutorial. Additionally, some fundamental 3D math is assumed, so keep a good textbook handy! (I used my 1st year maths lecture notes from University - I knew they'd come in handy later on! :)

First we have the definition of INFINITY, which represents how far to extend the shadow volume polygons (this will be explained more later on). If you are using a larger or smaller coordinate system, adjust this value accordingly.
// Definition Of "INFINITY" For Calculating The Extension Vector For The Shadow Volume
#define INFINITY	100
Next is the definition of the object structures.

The Point3f structure holds a coordinate in 3D space. This can be used for vertices or vectors.
// Structure Describing A Vertex In An Object
struct Point3f
{
    GLfloat x, y, z;
};
The Plane structure holds the 4 values that form the equation of a plane. These planes will represent the faces of the object.
// Structure Describing A Plane, In The Format: ax + by + cz + d = 0
struct Plane
{
    GLfloat a, b, c, d;
};
The Face structure contains all the information necessary about a triangle to cast a shadow.
  • The indices specified are from the object's array of vertices.
  • The vertex normals are used to calculate the orientation of the face in 3D space, so you can determine which are facing the light source when casting the shadows.
  • The plane equation describes the plane that this triangle lies in, in 3D space.
  • The neighbour indices are indices into the array of faces in the object. This allows you to specify which face joins this face at each edge of the triangle.
  • The visible parameter is used to specify whether the face is "visible" to the light source which is casting the shadows.
// Structure Describing An Object's Face
struct Face
{
    int vertexIndices[3];			// Index Of Each Vertex Within An Object That Makes Up The Triangle Of This Face
    Point3f normals[3];			// Normals To Each Vertex
    Plane planeEquation;			// Equation Of A Plane That Contains This Triangle
    int neighbourIndices[3];		// Index Of Each Face That Neighbours This One Within The Object
    bool visible;				// Is The Face Visible By The Light?
};
Finally, the ShadowedObject structure contains all the vertices and faces in the object. The memory for each of the arrays is dynamically created when it is loaded.
struct ShadowedObject
{
    int nVertices;
    Point3f *pVertices;			// Will Be Dynamically Allocated

    int nFaces;
    Face *pFaces;				// Will Be Dynamically Allocated
};
The readObject function is fairly self explanatory. It will fill in the given object structure with the values read from the file, allocating memory for the vertices and faces. It also initializes the neighbours to -1, which means there isn't one (yet). They will be calculated later.
bool readObject( const char *filename, ShadowedObject& object )
{
    FILE *pInputFile;
    int i;

    pInputFile = fopen( filename, "r" );
    if ( pInputFile == NULL )
    {
        cerr << "Unable to open the object file: " << filename << endl;
        return false;
    }

    // Read Vertices
    fscanf( pInputFile, "%d", &object.nVertices );
    object.pVertices = new Point3f[object.nVertices];
    for ( i = 0; i < object.nVertices; i++ )
    {
        fscanf( pInputFile, "%f", &object.pVertices[i].x );
        fscanf( pInputFile, "%f", &object.pVertices[i].y );
        fscanf( pInputFile, "%f", &object.pVertices[i].z );
    }

    // Read Faces
    fscanf( pInputFile, "%d", &object.nFaces );
    object.pFaces = new Face[object.nFaces];
    for ( i = 0; i < object.nFaces; i++ )
    {
        int j;
        Face *pFace = &object.pFaces[i];

        for ( j = 0; j < 3; j++ )
            pFace->neighbourIndices[j] = -1;	// No Neigbours Set Up Yet

        for ( j = 0; j < 3; j++ )
        {
            fscanf( pInputFile, "%d", &pFace->vertexIndices[j] );
            pFace->vertexIndices[j]--;		// Files Specify Them With A 1 Array Base, But We Use A 0 Array Base
        }

        for ( j = 0; j < 3; j++ )
        {
            fscanf( pInputFile, "%f", &pFace->normals[j].x );
            fscanf( pInputFile, "%f", &pFace->normals[j].y );
            fscanf( pInputFile, "%f", &pFace->normals[j].z );
        }
    }
    return true;
}
Likewise, killObject is self-explanatory - just delete all those dynamically allocated arrays inside the object when you are done with them. Note that a line was added to KillGLWindow to call this function for the object in question.
void killObject( ShadowedObject& object )
{
    delete[] object.pFaces;
    object.pFaces = NULL;
    object.nFaces = 0;

    delete[] object.pVertices;
    object.pVertices = NULL;
    object.nVertices = 0;
}
Now, with setConnectivity it starts to get interesting. This function is used to find out what neighbours there are to each face of the object given. Here's some pseudo code:
for each face (A) in the object
    for each edge in A
        if we don't know this edges neighbour yet
            for each face (B) in the object (except A)
                for each edge in B
                    if A's edge is the same as B's edge, then they are neighbouring each other on that edge
                        set the neighbour property for each face A and B, then move onto next edge in A
The last two lines are accomplished with the following code. By finding the two vertices that mark the ends of an edge and comparing them, you can discover if it is the same edge. The part (edgeA+1)%3 gets a vertex next to the one you are considering. Then you check if the vertices match (the order may be different, hence the second case of the if statement).
    int vertA1 = pFaceA->vertexIndices[edgeA];
    int vertA2 = pFaceA->vertexIndices[( edgeA+1 )%3];

    int vertB1 = pFaceB->vertexIndices[edgeB];
    int vertB2 = pFaceB->vertexIndices[( edgeB+1 )%3];

    // Check If They Are Neighbours - IE, The Edges Are The Same
    if (( vertA1 == vertB1 && vertA2 == vertB2 ) || ( vertA1 == vertB2 && vertA2 == vertB1 ))
    {
        pFaceA->neighbourIndices[edgeA] = faceB;
        pFaceB->neighbourIndices[edgeB] = faceA;
        edgeFound = true;
        break;
    }
Luckily, another easy function while you take a breath. drawObject renders each face one by one.
// Draw An Object - Simply Draw Each Triangular Face.
void drawObject( const ShadowedObject& object )
{
    glBegin( GL_TRIANGLES );
    for ( int i = 0; i < object.nFaces; i++ )
    {
        const Face& face = object.pFaces[i];

        for ( int j = 0; j < 3; j++ )
        {
            const Point3f& vertex = object.pVertices[face.vertexIndices[j]];

            glNormal3f( face.normals[j].x, face.normals[j].y, face.normals[j].z );
            glVertex3f( vertex.x, vertex.y, vertex.z );
        }
    }
    glEnd();
}
Calculating the equation of a plane looks ugly, but it is just a simple mathematical formula that you grab from a textbook when you need it.
void calculatePlane( const ShadowedObject& object, Face& face )
{
    // Get Shortened Names For The Vertices Of The Face
    const Point3f& v1 = object.pVertices[face.vertexIndices[0]];
    const Point3f& v2 = object.pVertices[face.vertexIndices[1]];
    const Point3f& v3 = object.pVertices[face.vertexIndices[2]];

    face.planeEquation.a = v1.y*(v2.z-v3.z) + v2.y*(v3.z-v1.z) + v3.y*(v1.z-v2.z);
    face.planeEquation.b = v1.z*(v2.x-v3.x) + v2.z*(v3.x-v1.x) + v3.z*(v1.x-v2.x);
    face.planeEquation.c = v1.x*(v2.y-v3.y) + v2.x*(v3.y-v1.y) + v3.x*(v1.y-v2.y);
    face.planeEquation.d = -( v1.x*( v2.y*v3.z - v3.y*v2.z ) +
                v2.x*(v3.y*v1.z - v1.y*v3.z) +
                v3.x*(v1.y*v2.z - v2.y*v1.z) );
}
Have you caught your breath yet? Good, because you are about to learn how to cast a shadow! The castShadow function does all of the GL specifics, and passes it on to doShadowPass to render the shadow in two passes.

First up, we determine which surfaces are facing the light. We do this by seeing which side of the plane the light is on. This is done by substituting the light's position into the equation for the plane. If this is larger than 0, then it is in the same direction as the normal to the plane and visible by the light. If not, then it is not visible by the light. (Again, refer to a good Math textbook for a better explanation of geometry in 3D).
void castShadow( ShadowedObject& object, GLfloat *lightPosition )
{
    // Determine Which Faces Are Visible By The Light.
    for ( int i = 0; i < object.nFaces; i++ )
    {
        const Plane& plane = object.pFaces[i].planeEquation;

        GLfloat side = plane.a*lightPosition[0]+
            plane.b*lightPosition[1]+
            plane.c*lightPosition[2]+
            plane.d;

        if ( side > 0 )
            object.pFaces[i].visible = true;
        else
            object.pFaces[i].visible = false;
    }
The next section sets up the necessary OpenGL states for rendering the shadows.

First, we push all the attributes onto the stack that will be modified. This makes changing them back a lot easier.

Lighting is disabled because we will not be rendering to the color (output) buffer, just the stencil buffer. For the same reason, the color mask turns off all color components (so drawing a polygon won't get through to the output buffer).

Although depth testing is still used, we don't want the shadows to appear as solid objects in the depth buffer, so the depth mask prevents this from happening.

The stencil buffer is turned on as that is what is going to be used to draw the shadows into.
    glPushAttrib( GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_ENABLE_BIT | GL_POLYGON_BIT | GL_STENCIL_BUFFER_BIT );
    glDisable( GL_LIGHTING );					// Turn Off Lighting
    glDepthMask( GL_FALSE );					// Turn Off Writing To The Depth-Buffer
    glDepthFunc( GL_LEQUAL );
    glEnable( GL_STENCIL_TEST );					// Turn On Stencil Buffer Testing
    glColorMask( GL_FALSE, GL_FALSE, GL_FALSE, GL_FALSE );		// Don't Draw Into The Colour Buffer
    glStencilFunc( GL_ALWAYS, 1, 0xFFFFFFFFL );
Ok, now the shadows are actually rendered. We'll come back to that in a moment when we look at the doShadowPass function. They are rendered in two passes as you can see, one incrementing the stencil buffer with the front faces (casting the shadow), the second decrementing the stencil buffer with the backfaces ("turning off" the shadow between the object and any other surfaces).
    // First Pass. Increase Stencil Value In The Shadow
    glFrontFace( GL_CCW );
    glStencilOp( GL_KEEP, GL_KEEP, GL_INCR );
    doShadowPass( object, lightPosition );
    // Second Pass. Decrease Stencil Value In The Shadow
    glFrontFace( GL_CW );
    glStencilOp( GL_KEEP, GL_KEEP, GL_DECR );
    doShadowPass( object, lightPosition );
To understand how the second pass works, my best advise is to comment it out and run the tutorial again. To save you the trouble, I have done it here:

Figure 1: First Pass | Figure 2: Second Pass

The final section of this function draws one blended rectangle over the whole screen, to cast a shadow. The darker you make this rectangle, the darker the shadows will be. So to change the properties of the shadow, change the glColor4f statement. Higher alpha will make it more black. Or you can make it red, green, purple, ...!
    glFrontFace( GL_CCW );
    glColorMask( GL_TRUE, GL_TRUE, GL_TRUE, GL_TRUE );	// Enable Rendering To Colour Buffer For All Components

    // Draw A Shadowing Rectangle Covering The Entire Screen
    glColor4f( 0.0f, 0.0f, 0.0f, 0.4f );
    glEnable( GL_BLEND );
    glBlendFunc( GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA );
    glStencilFunc( GL_NOTEQUAL, 0, 0xFFFFFFFFL );
    glStencilOp( GL_KEEP, GL_KEEP, GL_KEEP );
    glPushMatrix();
    glLoadIdentity();
    glBegin( GL_TRIANGLE_STRIP );
        glVertex3f(-0.1f, 0.1f,-0.10f);
        glVertex3f(-0.1f,-0.1f,-0.10f);
        glVertex3f( 0.1f, 0.1f,-0.10f);
        glVertex3f( 0.1f,-0.1f,-0.10f);
    glEnd();
    glPopMatrix();
    glPopAttrib();
}
Ok, the next part draws the shadowed quads. How does that work? What happens is that you go through every face, and if it is visible, then you check all of its edges. If at the edge, there is no neighbouring face, or the neighbouring face is not visible, the edge casts a shadow. If you think about the two cases clearly, then you'll see this is true. By drawing a quadrilateral (as two triangles) comprising of the points of the edge, and the edge projected backwards through the scene you get the shadow cast by it.

The brute force approach used here just draws to "infinity", and the shadow polygon is clipped against all the polygons it encounters. This causes piercing, which will stress the video hardware. For a high-performance modification to this algorithm, you should clip the polygon to the objects behind it. This is much trickier and has problems of its own, but if that's what you want to do, you should refer to this Gamasutra article.

The code to do all of that is not as tricky as it sounds. To start with, here is a snippet that loops through the objects. By the end of it, we have an edge, j, and its neighbouring face, specified by neighbourIndex.
void doShadowPass( ShadowedObject& object, GLfloat *lightPosition )
{
    for ( int i = 0; i < object.nFaces; i++ )
    {
        const Face& face = object.pFaces[i];

        if ( face.visible )
        {
            // Go Through Each Edge
            for ( int j = 0; j < 3; j++ )
            {
                int neighbourIndex = face.neighbourIndices[j];
Next, check if there is a visible neighbouring face to this object. If not, then this edge casts a shadow.
                // If There Is No Neighbour, Or Its Neighbouring Face Is Not Visible, Then This Edge Casts A Shadow
                if ( neighbourIndex == -1 || object.pFaces[neighbourIndex].visible == false )
                {
The next segment of code will retrieve the two vertices from the current edge, v1 and v2. Then, it calculates v3 and v4, which are projected along the vector between the light source and the first edge. They are scaled to INFINITY, which was set to a very large value.
                    // Get The Points On The Edge
                    const Point3f& v1 = object.pVertices[face.vertexIndices[j]];
                    const Point3f& v2 = object.pVertices[face.vertexIndices[( j+1 )%3]];

                    // Calculate The Two Vertices In Distance
                    Point3f v3, v4;

                    v3.x = ( v1.x-lightPosition[0] )*INFINITY;
                    v3.y = ( v1.y-lightPosition[1] )*INFINITY;
                    v3.z = ( v1.z-lightPosition[2] )*INFINITY;

                    v4.x = ( v2.x-lightPosition[0] )*INFINITY;
                    v4.y = ( v2.y-lightPosition[1] )*INFINITY;
                    v4.z = ( v2.z-lightPosition[2] )*INFINITY;
I think you'll understand the next section, it justs draws the quadrilateral defined by those four points:
                    // Draw The Quadrilateral (As A Triangle Strip)
                    glBegin( GL_TRIANGLE_STRIP );
                        glVertex3f( v1.x, v1.y, v1.z );
                        glVertex3f( v1.x+v3.x, v1.y+v3.y, v1.z+v3.z );
                        glVertex3f( v2.x, v2.y, v2.z );
                        glVertex3f( v2.x+v4.x, v2.y+v4.y, v2.z+v4.z );
                    glEnd();
                }
            }
        }
    }
}
With that, the shadow casting section is completed. But we are not finished yet! What about drawGLScene? Lets start with the simple bits: clearing the buffers, positioning the light source, and drawing a sphere:
bool drawGLScene()
{
    GLmatrix16f Minv;
    GLvector4f wlp, lp;

    // Clear Color Buffer, Depth Buffer, Stencil Buffer
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT | GL_STENCIL_BUFFER_BIT);

    glLoadIdentity();						// Reset Modelview Matrix
    glLightfv(GL_LIGHT1, GL_POSITION, LightPos);			// Position Light1
    glTranslatef(0.0f, 0.0f, -20.0f);				// Zoom Into Screen 20 Units
    glTranslatef(SpherePos[0], SpherePos[1], SpherePos[2]);		// Position The Sphere
    gluSphere(q, 1.5f, 32, 16);					// Draw A Sphere
Next, we have to calculate the light's position relative to the local coordinate system of the object. The comments explain each step in detail. Minv stores the object's transformation matrix, however it is done in reverse, and with negative arguments, so it is actually the inverse of the transformation matrix. Then lp is created as a copy of the light's position, and multiplied by the matrix. Thus, lp is the light's position in the object's coordinate system.
    glLoadIdentity();						// Reset Matrix
    glRotatef(-yrot, 0.0f, 1.0f, 0.0f);				// Rotate By -yrot On Y Axis
    glRotatef(-xrot, 1.0f, 0.0f, 0.0f);				// Rotate By -xrot On X Axis
    glTranslatef(-ObjPos[0], -ObjPos[1], -ObjPos[2]);		// Move Negative On All Axis Based On ObjPos[] Values (X, Y, Z)
    glGetFloatv(GL_MODELVIEW_MATRIX,Minv);				// Retrieve ModelView Matrix (Stores In Minv)
    lp[0] = LightPos[0];						// Store Light Position X In lp[0]
    lp[1] = LightPos[1];						// Store Light Position Y In lp[1]
    lp[2] = LightPos[2];						// Store Light Position Z In lp[2]
    lp[3] = LightPos[3];						// Store Light Direction In lp[3]
    VMatMult(Minv, lp);						// We Store Rotated Light Vector In 'lp' Array
Now, palm off some of the work to draw the room, and the object. Calling castShadow draws the shadow of the object.
    glLoadIdentity();						// Reset Modelview Matrix
    glTranslatef(0.0f, 0.0f, -20.0f);				// Zoom Into The Screen 20 Units
    DrawGLRoom();							// Draw The Room
    glTranslatef(ObjPos[0], ObjPos[1], ObjPos[2]);			// Position The Object
    glRotatef(xrot, 1.0f, 0.0f, 0.0f);				// Spin It On The X Axis By xrot
    glRotatef(yrot, 0.0f, 1.0f, 0.0f);				// Spin It On The Y Axis By yrot
    drawObject(obj);						// Procedure For Drawing The Loaded Object
    castShadow(obj, lp);						// Procedure For Casting The Shadow Based On The Silhouette
The following few lines draw a little orange circle where the light is:
    glColor4f(0.7f, 0.4f, 0.0f, 1.0f);				// Set Color To An Orange
    glDisable(GL_LIGHTING);						// Disable Lighting
    glDepthMask(GL_FALSE);						// Disable Depth Mask
    glTranslatef(lp[0], lp[1], lp[2]);				// Translate To Light's Position
                                    // Notice We're Still In Local Coordinate System
    gluSphere(q, 0.2f, 16, 8);					// Draw A Little Yellow Sphere (Represents Light)
    glEnable(GL_LIGHTING);						// Enable Lighting
    glDepthMask(GL_TRUE);						// Enable Depth Mask
The last part updates the object's position and returns.
    xrot += xspeed;							// Increase xrot By xspeed
    yrot += yspeed;							// Increase yrot By yspeed

    glFlush();							// Flush The OpenGL Pipeline
    return TRUE;							// Everything Went OK
}
We did specify a DrawGLRoom function, and here it is - a bunch of rectangles to cast shadows against:
void DrawGLRoom()							// Draw The Room (Box)
{
    glBegin(GL_QUADS);						// Begin Drawing Quads
        // Floor
        glNormal3f(0.0f, 1.0f, 0.0f);				// Normal Pointing Up
        glVertex3f(-10.0f,-10.0f,-20.0f);			// Back Left
        glVertex3f(-10.0f,-10.0f, 20.0f);			// Front Left
        glVertex3f( 10.0f,-10.0f, 20.0f);			// Front Right
        glVertex3f( 10.0f,-10.0f,-20.0f);			// Back Right
        // Ceiling
        glNormal3f(0.0f,-1.0f, 0.0f);				// Normal Point Down
        glVertex3f(-10.0f, 10.0f, 20.0f);			// Front Left
        glVertex3f(-10.0f, 10.0f,-20.0f);			// Back Left
        glVertex3f( 10.0f, 10.0f,-20.0f);			// Back Right
        glVertex3f( 10.0f, 10.0f, 20.0f);			// Front Right
        // Front Wall
        glNormal3f(0.0f, 0.0f, 1.0f);				// Normal Pointing Away From Viewer
        glVertex3f(-10.0f, 10.0f,-20.0f);			// Top Left
        glVertex3f(-10.0f,-10.0f,-20.0f);			// Bottom Left
        glVertex3f( 10.0f,-10.0f,-20.0f);			// Bottom Right
        glVertex3f( 10.0f, 10.0f,-20.0f);			// Top Right
        // Back Wall
        glNormal3f(0.0f, 0.0f,-1.0f);				// Normal Pointing Towards Viewer
        glVertex3f( 10.0f, 10.0f, 20.0f);			// Top Right
        glVertex3f( 10.0f,-10.0f, 20.0f);			// Bottom Right
        glVertex3f(-10.0f,-10.0f, 20.0f);			// Bottom Left
        glVertex3f(-10.0f, 10.0f, 20.0f);			// Top Left
        // Left Wall
        glNormal3f(1.0f, 0.0f, 0.0f);				// Normal Pointing Right
        glVertex3f(-10.0f, 10.0f, 20.0f);			// Top Front
        glVertex3f(-10.0f,-10.0f, 20.0f);			// Bottom Front
        glVertex3f(-10.0f,-10.0f,-20.0f);			// Bottom Back
        glVertex3f(-10.0f, 10.0f,-20.0f);			// Top Back
        // Right Wall
        glNormal3f(-1.0f, 0.0f, 0.0f);				// Normal Pointing Left
        glVertex3f( 10.0f, 10.0f,-20.0f);			// Top Back
        glVertex3f( 10.0f,-10.0f,-20.0f);			// Bottom Back
        glVertex3f( 10.0f,-10.0f, 20.0f);			// Bottom Front
        glVertex3f( 10.0f, 10.0f, 20.0f);			// Top Front
    glEnd();							// Done Drawing Quads
}
And before I forget, here is the VMatMult function which multiplies a vector by a matrix (get that Math textbook out again!):
void VMatMult(GLmatrix16f M, GLvector4f v)
{
    GLfloat res[4];							// Hold Calculated Results
    res[0]=M[ 0]*v[0]+M[ 4]*v[1]+M[ 8]*v[2]+M[12]*v[3];
    res[1]=M[ 1]*v[0]+M[ 5]*v[1]+M[ 9]*v[2]+M[13]*v[3];
    res[2]=M[ 2]*v[0]+M[ 6]*v[1]+M[10]*v[2]+M[14]*v[3];
    res[3]=M[ 3]*v[0]+M[ 7]*v[1]+M[11]*v[2]+M[15]*v[3];
    v[0]=res[0];							// Results Are Stored Back In v[]
    v[1]=res[1];
    v[2]=res[2];
    v[3]=res[3];							// Homogenous Coordinate
}
The function to load the object is simple, just calling readObject, and then setting up the connectivity and the plane equations for each face.
int InitGLObjects()							// Initialize Objects
{
    if (!readObject("Data/Object2.txt", obj))			// Read Object2 Into obj
    {
        return FALSE;						// If Failed Return False
    }

    setConnectivity(obj);						// Set Face To Face Connectivity

    for ( int i=0;i < obj.nFaces;i++)				// Loop Through All Object Faces
        calculatePlane(obj, obj.pFaces[i]);			// Compute Plane Equations For All Faces

    return TRUE;							// Return True
}
Finally, KillGLObjects is a convenience function so that if you add more objects, you can add them in a central place.
void KillGLObjects()
{
    killObject( obj );
}
All of the other functions don't require any further explanantion. I have left out the standard NeHe tutorial code, as well as all of the variable definitions and the keyboard processing function. The commenting alone explains these sufficiently.

Some things to note about the tutorial:
  • The sphere doesn't stop shadows being projected on the wall. In reality, the sphere should also be casting a shadow, so seeing the one on the wall won't matter, it's hidden. It's just there to see what happens on curved surfaces :)
  • Arseny L. writes: If you are having problems with a TNT2 in Windowed mode, make sure your desktop color depth is not set to 16bit. In 16bit color mode, the stencil buffer is emulated, resulting in sluggish performance. There are no problems in 32bit mode (I have a TNT2 Ultra and I checked it).
I've got to admit this was a lengthy task to write out this tutorial. It gives you full appreciation for the work that Jeff puts in! I hope you enjoy it, and give a huge thanks to Banu who wrote the original code! IF there is anything that needs further explaining in here, you are welcome to contact me (Brett), at brettporter@yahoo.com.

Banu Cosmin (Choko) - Original Code
Brett Porter - HTML / Code Modifications
Jeff Molofee (NeHe) - HTML Clean Up / Base Code


Jeff Molofee's OpenGL Windows Tutorial #29

Lesson 29
Bezier Patches

Written by: David Nikdel ( ogapo@ithink.net )

This tutorial is intended to introduce you to Bezier Surfaces in the hopes that someone more artistic than myself will do something really cool with them and show all of us. This is not intended as a complete Bezier patch library, but more as proof of concept code to get you familiar with how these curved surfaces actually work. Also, as this is a very informal piece, I may have occasional lapses in correct terminology in favor of comprehensability; I hope this sits well with everyone. Finally, to those of you already familiar with Beziers who are just reading this to see if I screw up, shame on you ;-), but if you find anything wrong by all means let me or NeHe know, after all no one's perfect, eh? Oh, and one more thing, none of this code is optimised beyond my normal programming technique, this is by design. I want everyone to be able to see exactly what is going on. Well, I guess that's enough of an intro. On with the show!

The Math - ::evil music:: (warning, kinda long section)

Ok, it will be very hard to understand Beziers without at least a basic understanding of the math behind it, however, if you just don't feel like reading this section or already know the math, you can skip it. First I will start out by describing the Bezier curve itself then move on to how to create a Bezier Patch.

Odds are, if you've ever used a graphics program you are already familiar with Bezier curves, perhaps not by that name though. They are the primary method of drawing curved lines and are commonly represented as a series of points each with 2 points representing the tangent at that point from the left and right. Here's what one looks like:

This is the most basic Bezier curve possible (longer ones are made by attaching many of these together (many times without the user realizing it)). This curve is actually defined by only 4 points, those would be the 2 ending control points and the 2 middle control points. To the computer, all the points are the same, but to aid in design we often connect the first and the last two, respectively, because those lines will always be tangent to the endpoint. The curve is a parametric curve and is drawn by finding any number of points evenly spaced along the curve and connecting them with straight lines. In this way you can control the resolution of the patch (and the amount of computation). The most common way to use this is to tesselate it less at a farther distance and more at a closer distance so that, to the viewer, it always appears to be a perfectly curved surface with the lowest possible speed hit.

Bezier curves are based on a basis function from which more complicated versions are derived. Here's the function:

t + (1 - t) = 1

Sounds simple enough huh? Well it really is, this is the Bezier most basic Bezier curve, a 1st degree curve. As you may have guessed from the terminology, the Bezier curves are polynomials, and as we remember from algebra, a 1st degree polynomial is just a straight line; not very interesting. Well, since the basis function is true for all numbers t, we can square, cube, whatever, each side and it will still be true right? Well, lets try cubing it.

(t + (1-t))^3 = 1^3

t^3 + 3*t^2*(1-t) + 3*t*(1-t)^2 + (1-t)^3 = 1

This is the equation we use to calculate the most common Bezier, the 3rd degree Bezier curve (yes, it's a strange phenomenon, but sometimes when you're doing math the functions just come out all rainbow colored ;-) ). This is most common for two reasons, a) it's the lowest degree polynomial that need not necesarily lie in a plane (there are 4 control points) and b) the tangent lines on the sides are not dependant on one another (with a 2nd degree there would be only 3 control points). So do you see the Bezier curve yet? Hehe, me neither, that's because I still need to add one thing.

Ok, since the entire left side is equal to 1, it's safe to assume that if you add all the components they should still equal one. Does this sound like it could be used to descide how much of each control point to use in calculating a point on the curve? (hint: just say yes ;-) ) Well you're right! When we want to calculate the value of a point some percent along the curve we simply multiply each part by a control point (as a vector) and find the sum. Generally, we'll work with 0 <= t <= 1, but it's not technically necesary. Confused yet? Here's the function:

P1*t^3 + P2*3*t^2*(1-t) + P3*3*t*(1-t)^2 + P4*(1-t)^3 = 1

Because polynomials are always continuous, this makes for a good way to morp between the 4 points. The only points it actually reaches though are P1 and P4, when t = 1 and 0 respectively.

Now, that's all well and good, but how can I use these in 3D you ask? Well it's actually quite simple, in order to form a Bezier patch, you need 16 control points (4*4), and 2 variables t and v. What you do from there is calculate a point at v along 4 of the parallel curves then use those 4 points to make a new curve and calculate t along that curve. By calculating enough of these points, we can draw triangle strips to connect them, thus drawing the Bezier patch.

Well, I suppose that's enough math for now, on to the code!
#include <windows.h>							// Header File For Windows
#include <math.h>							// Header File For Math Library Routines
#include <stdio.h>							// Header File For Standard I/O Routines
#include <stdlib.h>							// Header File For Standard Library
#include <gl\gl.h>							// Header File For The OpenGL32 Library
#include <gl\glu.h>							// Header File For The GLu32 Library
#include <gl\glaux.h>							// Header File For The Glaux Library

typedef struct point_3d {						// Structure For A 3-Dimensional Point ( NEW )
    double x, y, z;
} POINT_3D;

typedef struct bpatch {							// Structure For A 3rd Degree Bezier Patch ( NEW )
    POINT_3D	anchors[4][4];					// 4x4 Grid Of Anchor Points
    GLuint		dlBPatch;					// Display List For Bezier Patch
    GLuint		texture;					// Texture For The Patch
} BEZIER_PATCH;

HDC			hDC=NULL;					// Private GDI Device Context
HGLRC			hRC=NULL;					// Permanent Rendering Context
HWND			hWnd=NULL;					// Holds Our Window Handle
HINSTANCE		hInstance;					// Holds The Instance Of The Application

DEVMODE			DMsaved;					// Saves The Previous Screen Settings ( NEW )

bool			keys[256];					// Array Used For The Keyboard Routine
bool			active=TRUE;					// Window Active Flag Set To TRUE By Default
bool			fullscreen=TRUE;				// Fullscreen Flag Set To Fullscreen Mode By Default

GLfloat			rotz = 0.0f;					// Rotation About The Z Axis
BEZIER_PATCH		mybezier;					// The Bezier Patch We're Going To Use ( NEW )
BOOL			showCPoints=TRUE;				// Toggles Displaying The Control Point Grid ( NEW )
int			divs = 7;					// Number Of Intrapolations (Controls Poly Resolution) ( NEW )

LRESULT	CALLBACK WndProc(HWND, UINT, WPARAM, LPARAM);			// Declaration For WndProc
The following are just a few quick functions for some simple vector math. If you're a fan of C++ you might consider using a point class (just make sure it's 3d).
// Adds 2 Points. Don't Just Use '+' ;)
POINT_3D pointAdd(POINT_3D p, POINT_3D q) {
    p.x += q.x;		p.y += q.y;		p.z += q.z;
    return p;
}

// Multiplies A Point And A Constant. Don't Just Use '*'
POINT_3D pointTimes(double c, POINT_3D p) {
    p.x *= c;	p.y *= c;	p.z *= c;
    return p;
}

// Function For Quick Point Creation
POINT_3D makePoint(double a, double b, double c) {
    POINT_3D p;
    p.x = a;	p.y = b;	p.z = c;
    return p;
}
This is basically just the 3rd degree basis function written in C, it takes a variable u and an array of 4 points and computes a point on the curve. By stepping u in equal increments between 0 and 1, we'll get a nice approximation of the curve.
// Calculates 3rd Degree Polynomial Based On Array Of 4 Points
// And A Single Variable (u) Which Is Generally Between 0 And 1
POINT_3D Bernstein(float u, POINT_3D *p) {
    POINT_3D	a, b, c, d, r;

    a = pointTimes(pow(u,3), p[0]);
    b = pointTimes(3*pow(u,2)*(1-u), p[1]);
    c = pointTimes(3*u*pow((1-u),2), p[2]);
    d = pointTimes(pow((1-u),3), p[3]);

    r = pointAdd(pointAdd(a, b), pointAdd(c, d));

    return r;
}
This function does the lion's share of the work by generating all the triangle strips and storing them in a display list. We do this so that we don't have to recalculate the patch each frame, only when it changes. By the way, a cool effect you might want to try might be to use the morphing tutorial to morph the patch's control points. This would yeild a very cool smooth, organic, morphing effect for relatively little overhead (you only morph 16 points, but you have to recalculate). The "last" array is used to keep the previous line of points (since a triangle strip needs both rows). Also, texture coordinates are calculated by using the u and v values as the percentages (planar mapping).

One thing we don't do is calculate the normals for lighting. When it comes to this, you basically have two options. The first is to find the center of each triangle, then use a bit of calculus and calculate the tangent on both the x and y axes, then do the cross product to get a vector perpendicular to both, THEN normalize the vector and use that as the normal. OR (yes, there is a faster way) you can cheat and just use the normal of the triangle (calculated your favorite way) to get a pretty good approximation. I prefer the latter; the speed hit, in my opinion, isn't worth the extra little bit of realism.
// Generates A Display List Based On The Data In The Patch
// And The Number Of Divisions
GLuint genBezier(BEZIER_PATCH patch, int divs) {
    int		u = 0, v;
    float		py, px, pyold;
    GLuint		drawlist = glGenLists(1);			// Make The Display List
    POINT_3D	temp[4];
    POINT_3D	*last = (POINT_3D*)malloc(sizeof(POINT_3D)*(divs+1));
                // Array Of Points To Mark The First Line Of Polys

    if (patch.dlBPatch != NULL)					// Get Rid Of Any Old Display Lists
        glDeleteLists(patch.dlBPatch, 1);

    temp[0] = patch.anchors[0][3];					// The First Derived Curve (Along X-Axis)
    temp[1] = patch.anchors[1][3];
    temp[2] = patch.anchors[2][3];
    temp[3] = patch.anchors[3][3];

    for (v=0;v<=divs;v++) {						// Create The First Line Of Points
        px = ((float)v)/((float)divs);				// Percent Along Y-Axis
    // Use The 4 Points From The Derived Curve To Calculate The Points Along That Curve
        last[v] = Bernstein(px, temp);
    }

    glNewList(drawlist, GL_COMPILE);				// Start A New Display List
    glBindTexture(GL_TEXTURE_2D, patch.texture);			// Bind The Texture

    for (u=1;u<=divs;u++) {
        py    = ((float)u)/((float)divs);			// Percent Along Y-Axis
        pyold = ((float)u-1.0f)/((float)divs);			// Percent Along Old Y Axis

        temp[0] = Bernstein(py, patch.anchors[0]);		// Calculate New Bezier Points
        temp[1] = Bernstein(py, patch.anchors[1]);
        temp[2] = Bernstein(py, patch.anchors[2]);
        temp[3] = Bernstein(py, patch.anchors[3]);

        glBegin(GL_TRIANGLE_STRIP);				// Begin A New Triangle Strip

        for (v=0;v<=divs;v++) {
            px = ((float)v)/((float)divs);			// Percent Along The X-Axis

            glTexCoord2f(pyold, px);			// Apply The Old Texture Coords
            glVertex3d(last[v].x, last[v].y, last[v].z);	// Old Point

            last[v] = Bernstein(px, temp);			// Generate New Point
            glTexCoord2f(py, px);				// Apply The New Texture Coords
            glVertex3d(last[v].x, last[v].y, last[v].z);	// New Point
        }

        glEnd();						// END The Triangle Strip
    }

    glEndList();							// END The List

    free(last);							// Free The Old Vertices Array
    return drawlist;						// Return The Display List
}
Here we're just loading the matrix with some values I've picked that I think look cool. Feel free to screw around with these and see what it looks like. :-)
void initBezier(void) {
    mybezier.anchors[0][0] = makePoint(-0.75,	-0.75,	-0.50);	// Set The Bezier Vertices
    mybezier.anchors[0][1] = makePoint(-0.25,	-0.75,	 0.00);
    mybezier.anchors[0][2] = makePoint( 0.25,	-0.75,	 0.00);
    mybezier.anchors[0][3] = makePoint( 0.75,	-0.75,	-0.50);
    mybezier.anchors[1][0] = makePoint(-0.75,	-0.25,	-0.75);
    mybezier.anchors[1][1] = makePoint(-0.25,	-0.25,	 0.50);
    mybezier.anchors[1][2] = makePoint( 0.25,	-0.25,	 0.50);
    mybezier.anchors[1][3] = makePoint( 0.75,	-0.25,	-0.75);
    mybezier.anchors[2][0] = makePoint(-0.75,	 0.25,	 0.00);
    mybezier.anchors[2][1] = makePoint(-0.25,	 0.25,	-0.50);
    mybezier.anchors[2][2] = makePoint( 0.25,	 0.25,	-0.50);
    mybezier.anchors[2][3] = makePoint( 0.75,	 0.25,	 0.00);
    mybezier.anchors[3][0] = makePoint(-0.75,	 0.75,	-0.50);
    mybezier.anchors[3][1] = makePoint(-0.25,	 0.75,	-1.00);
    mybezier.anchors[3][2] = makePoint( 0.25,	 0.75,	-1.00);
    mybezier.anchors[3][3] = makePoint( 0.75,	 0.75,	-0.50);
    mybezier.dlBPatch = NULL;					// Go Ahead And Initialize This To NULL
}
This is basically just an optimised routine to load a single bitmap. It can easily be used to load an array of em just by putting it in a simple loop.
// Load Bitmaps And Convert To Textures

BOOL LoadGLTexture(GLuint *texPntr, char* name)
{
    BOOL success = FALSE;
    AUX_RGBImageRec *TextureImage = NULL;

    glGenTextures(1, texPntr);					// Generate 1 Texture

    FILE* test=NULL;
    TextureImage = NULL;

    test = fopen(name, "r");					// Test To See If The File Exists
    if (test != NULL) {						// If It Does
        fclose(test);						// Close The File
        TextureImage = auxDIBImageLoad(name);			// And Load The Texture
    }

    if (TextureImage != NULL) {					// If It Loaded
        success = TRUE;

        // Typical Texture Generation Using Data From The Bitmap
        glBindTexture(GL_TEXTURE_2D, *texPntr);
        glTexImage2D(GL_TEXTURE_2D, 0, 3, TextureImage->sizeX, TextureImage->sizeY, 0, GL_RGB, GL_UNSIGNED_BYTE, TextureImage->data);
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);
        glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
    }

    if (TextureImage->data)
        free(TextureImage->data);

    return success;
}
Just adding the patch initialization here. You would do this whenever you create a patch. Again, this might be a cool place to use C++ (bezier class?).
int InitGL(GLvoid)							// All Setup For OpenGL Goes Here
{
    glEnable(GL_TEXTURE_2D);					// Enable Texture Mapping
    glShadeModel(GL_SMOOTH);					// Enable Smooth Shading
    glClearColor(0.05f, 0.05f, 0.05f, 0.5f);			// Black Background
    glClearDepth(1.0f);						// Depth Buffer Setup
    glEnable(GL_DEPTH_TEST);					// Enables Depth Testing
    glDepthFunc(GL_LEQUAL);						// The Type Of Depth Testing To Do
    glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST);		// Really Nice Perspective Calculations

    initBezier();							// Initialize the Bezier's Control Grid ( NEW )
    LoadGLTexture(&(mybezier.texture), "./Data/NeHe.bmp");		// Load The Texture ( NEW )
    mybezier.dlBPatch = genBezier(mybezier, divs);			// Generate The Patch ( NEW )

    return TRUE;							// Initialization Went OK
}
First call the bezier's display list. Then (if the outlines are on) draw the lines connecting the control points. You can toggle these by pressing SPACE.
int DrawGLScene(GLvoid)	{						// Here's Where We Do All The Drawing
    int i, j;
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);		// Clear Screen And Depth Buffer
    glLoadIdentity();						// Reset The Current Modelview Matrix
    glTranslatef(0.0f,0.0f,-4.0f);					// Move Left 1.5 Units And Into The Screen 6.0
    glRotatef(-75.0f,1.0f,0.0f,0.0f);
    glRotatef(rotz,0.0f,0.0f,1.0f);					// Rotate The Triangle On The Z-Axis

    glCallList(mybezier.dlBPatch);					// Call The Bezier's Display List
                                    // This Need Only Be Updated When The Patch Changes

    if (showCPoints) {						// If Drawing The Grid Is Toggled On
        glDisable(GL_TEXTURE_2D);
        glColor3f(1.0f,0.0f,0.0f);
        for(i=0;i<4;i++) {					// Draw The Horizontal Lines
            glBegin(GL_LINE_STRIP);
            for(j=0;j<4;j++)
                glVertex3d(mybezier.anchors[i][j].x, mybezier.anchors[i][j].y, mybezier.anchors[i][j].z);
            glEnd();
        }
        for(i=0;i<4;i++) {					// Draw The Vertical Lines
            glBegin(GL_LINE_STRIP);
            for(j=0;j<4;j++)
                glVertex3d(mybezier.anchors[j][i].x, mybezier.anchors[j][i].y, mybezier.anchors[j][i].z);
            glEnd();
        }
        glColor3f(1.0f,1.0f,1.0f);
        glEnable(GL_TEXTURE_2D);
    }

    return TRUE;							// Keep Going
}
This function contains some modified code to make your projects more compatable. It doesn't have anything to do with Bezier curves, but it does fix a problem with switching back the resolution after fullscreen mode with some video cards (including mine, a crappy old ATI Rage PRO, and a few others). I hope, you'll use this from now on so me and others with similar cards can view your cool examples GL code properly. To make these modifications make the changes in KillGLWindow(), make sure and define DMsaved, and make the one line change in CreateGLWindow() (it's marked).
GLvoid KillGLWindow(GLvoid)						// Properly Kill The Window
{
    if (fullscreen)							// Are We In Fullscreen Mode?
    {
        if (!ChangeDisplaySettings(NULL,CDS_TEST)) { 		// If The Shortcut Doesn't Work ( NEW )
            ChangeDisplaySettings(NULL,CDS_RESET);		// Do It Anyway (To Get The Values Out Of The Registry) ( NEW )
            ChangeDisplaySettings(&DMsaved,CDS_RESET);	// Change It To The Saved Settings ( NEW )
        } else {
            ChangeDisplaySettings(NULL,CDS_RESET);		// If It Works, Go Right Ahead ( NEW )
        }

        ShowCursor(TRUE);					// Show Mouse Pointer
    }

    if (hRC)							// Do We Have A Rendering Context?
    {
        if (!wglMakeCurrent(NULL,NULL))				// Are We Able To Release The DC And RC Contexts?
        {
            MessageBox(NULL,"Release Of DC And RC Failed.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        }

        if (!wglDeleteContext(hRC))				// Are We Able To Delete The RC?
        {
            MessageBox(NULL,"Release Rendering Context Failed.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        }
        hRC=NULL;						// Set RC To NULL
    }

    if (hDC && !ReleaseDC(hWnd,hDC))				// Are We Able To Release The DC
    {
        MessageBox(NULL,"Release Device Context Failed.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        hDC=NULL;						// Set DC To NULL
    }

    if (hWnd && !DestroyWindow(hWnd))				// Are We Able To Destroy The Window?
    {
        MessageBox(NULL,"Could Not Release hWnd.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        hWnd=NULL;						// Set hWnd To NULL
    }

    if (!UnregisterClass("OpenGL",hInstance))			// Are We Able To Unregister Class
    {
        MessageBox(NULL,"Could Not Unregister Class.","SHUTDOWN ERROR",MB_OK | MB_ICONINFORMATION);
        hInstance=NULL;						// Set hInstance To NULL
    }
}
Just added the EnumDisplaySettings() command here to save the old display settings. (part of the old graphics card fix).
/*	This Code Creates Our OpenGL Window.  Parameters Are:			*
 *	title			- Title To Appear At The Top Of The Window	*
 *	width			- Width Of The GL Window Or Fullscreen Mode	*
 *	height			- Height Of The GL Window Or Fullscreen Mode	*
 *	bits			- Number Of Bits To Use For Color (8/16/24/32)	*
 *	fullscreenflag	- Use Fullscreen Mode (TRUE) Or Windowed Mode (FALSE)	*/

BOOL CreateGLWindow(char* title, int width, int height, int bits, bool fullscreenflag)
{
    GLuint		PixelFormat;					// Holds The Results After Searching For A Match
    WNDCLASS	wc;						// Windows Class Structure
    DWORD		dwExStyle;					// Window Extended Style
    DWORD		dwStyle;					// Window Style
    RECT		WindowRect;					// Grabs Rectangle Upper Left / Lower Right Values
    WindowRect.left=(long)0;					// Set Left Value To 0
    WindowRect.right=(long)width;					// Set Right Value To Requested Width
    WindowRect.top=(long)0;						// Set Top Value To 0
    WindowRect.bottom=(long)height;					// Set Bottom Value To Requested Height

    fullscreen=fullscreenflag;					// Set The Global Fullscreen Flag

    hInstance		= GetModuleHandle(NULL);		// Grab An Instance For Our Window
    wc.style		= CS_HREDRAW | CS_VREDRAW | CS_OWNDC;	// Redraw On Size, And Own DC For Window
    wc.lpfnWndProc		= (WNDPROC) WndProc;			// WndProc Handles Messages
    wc.cbClsExtra		= 0;					// No Extra Window Data
    wc.cbWndExtra		= 0;					// No Extra Window Data
    wc.hInstance		= hInstance;				// Set The Instance
    wc.hIcon		= LoadIcon(NULL, IDI_WINLOGO);		// Load The Default Icon
    wc.hCursor		= LoadCursor(NULL, IDC_ARROW);		// Load The Arrow Pointer
    wc.hbrBackground	= NULL;					// No Background Required For GL
    wc.lpszMenuName		= NULL;					// We Don't Want A Menu
    wc.lpszClassName	= "OpenGL";				// Set The Class Name

    EnumDisplaySettings(NULL, ENUM_CURRENT_SETTINGS, &DMsaved);	// Save The Current Display State ( NEW )

    if (fullscreen)							// Attempt Fullscreen Mode?
    {
        DEVMODE dmScreenSettings;				// Device Mode
        memset(&dmScreenSettings,0,sizeof(dmScreenSettings));	// Makes Sure Memory's Cleared
        dmScreenSettings.dmSize=sizeof(dmScreenSettings);	// Size Of The Devmode Structure
        dmScreenSettings.dmPelsWidth	= width;		// Selected Screen Width
        dmScreenSettings.dmPelsHeight	= height;		// Selected Screen Height
        dmScreenSettings.dmBitsPerPel	= bits;			// Selected Bits Per Pixel
        dmScreenSettings.dmFields=DM_BITSPERPEL|DM_PELSWIDTH|DM_PELSHEIGHT;

    ... Code Cut To Save Space (No Further Changes To This Function) ...

    return TRUE;							// Success
}
All I did here was add commands to rotate the patch, raise/lower the resolution, and toggle the control lines.
int WINAPI WinMain(	HINSTANCE	hInstance,			// Instance
                    HINSTANCE	hPrevInstance,  // Previous Instance
                    LPSTR		lpCmdLine,	// Command Line Parameters
                    int		nCmdShow)	// Window Show State
{
    MSG		msg;						// Windows Message Structure
    BOOL	done=FALSE;						// Bool Variable To Exit Loop

    // Ask The User Which Screen Mode They Prefer
    if (MessageBox(NULL,"Would You Like To Run In Fullscreen Mode?", "Start FullScreen?",MB_YESNO|MB_ICONQUESTION)==IDNO)
    {
        fullscreen=FALSE;					// Windowed Mode
    }

    // Create Our OpenGL Window
    if (!CreateGLWindow("NeHe's Solid Object Tutorial",640,480,16,fullscreen))
    {
        return 0;						// Quit If Window Was Not Created
    }

    while(!done)							// Loop That Runs While done=FALSE
    {
        if (PeekMessage(&msg,NULL,0,0,PM_REMOVE))		// Is There A Message Waiting?
        {
            if (msg.message==WM_QUIT)			// Have We Received A Quit Message?
            {
                done=TRUE;				// If So done=TRUE
            }
            else						// If Not, Deal With Window Messages
            {
                TranslateMessage(&msg);			// Translate The Message
                DispatchMessage(&msg);			// Dispatch The Message
            }
        }
        else							// If There Are No Messages
        {
            // Draw The Scene.  Watch For ESC Key And Quit Messages From DrawGLScene()
            if ((active && !DrawGLScene()) || keys[VK_ESCAPE])	// Active?  Was There A Quit Received?
            {
                done=TRUE;				// ESC or DrawGLScene Signalled A Quit
            }
            else						// Not Time To Quit, Update Screen
            {
                SwapBuffers(hDC);			// Swap Buffers (Double Buffering)
            }

            if (keys[VK_LEFT])	rotz -= 0.8f;		// Rotate Left ( NEW )
            if (keys[VK_RIGHT])	rotz += 0.8f;		// Rotate Right ( NEW )
            if (keys[VK_UP]) {				// Resolution Up ( NEW )
                divs++;
                mybezier.dlBPatch = genBezier(mybezier, divs);	// Update The Patch
                keys[VK_UP] = FALSE;
            }
            if (keys[VK_DOWN] && divs > 1) {		// Resolution Down ( NEW )
                divs--;
                mybezier.dlBPatch = genBezier(mybezier, divs);	// Update The Patch
                keys[VK_DOWN] = FALSE;
            }
            if (keys[VK_SPACE]) {				// SPACE Toggles showCPoints ( NEW )
                showCPoints = !showCPoints;
                keys[VK_SPACE] = FALSE;
            }

            if (keys[VK_F1])				// Is F1 Being Pressed?
            {
                keys[VK_F1]=FALSE;			// If So Make Key FALSE
                KillGLWindow();				// Kill Our Current Window
                fullscreen=!fullscreen;			// Toggle Fullscreen / Windowed Mode
                // Recreate Our OpenGL Window
                if (!CreateGLWindow("NeHe's Solid Object Tutorial",640,480,16,fullscreen))
                {
                    return 0;			// Quit If Window Was Not Created
                }
            }
        }
    }

    // Shutdown
    KillGLWindow();							// Kill The Window
    return (msg.wParam);						// Exit The Program
}
Well, I hope this tutorial has been enlightening and you all now love Bezier curves as much as I do ;-). If you like this tutorial I may write another one on NURBS curves if anyone's interested. Please e-mail me and let me know what you thought of this tutorial.

About The Author: David Nikdel is currently 18 and a senior at Bartow Senior High School. His current projects include a research paper on curved surfaces in 3D graphics, an OpenGL based game called Blazing Sands and being lazy. His hobbies include programming, football, and paintballing. He will (hopefully) be a freshman at Georgia Tech next year.

David Nikdel - Code
Jeff Molofee (NeHe) - HTML


Jeff Molofee's OpenGL Windows Tutorial #30

Lesson 30
In this tutorial I´ll explain fast blitting and stretching parts of textures onto another texture. This is useful if you want to create a mixed texture, for example for a terrain engine. Imagine that you´ve only a simple grass texture on your landscape. Probably doesn't look to nice right? Anyway, there is a way to make it better! Just put a second texture (or a part of it!) onto the grass texture; you can do this step as often as you want. The second texture could be blended with alpha-blending over the base texture or copied onto it without blending. With this method you can create amazing textures without any effort and without losing speed at draw time (no more multi-texturing).

I´m using NeHe´s simple cube drawing code to show some results :)

I do NOT explain the parts of the code such as drawing the cube or the OpenGL initialization stuff. It´s all well explained in former tutorials. Second, English is not my native language. So please E-Mail me if something is not clearly explained. Please look at the Visual C code to see how it's all put together.

The first thing we need is a temporary buffer, which we can fill with our base texture data (cTexBuffer). Later we can mix in the other textures using a second buffer (cTexBuffer2).
unsigned char	*cTexBuffer;							// Our First Texture Buffer ( NEW )
unsigned char	*cTexBuffer2;							// Our Second Texture Buffer ( NEW )
After creating our buffers, the first thing we must do is create a function to allocate memory for the buffer. It's important that you make sure to allocate enough memory for the texture size. This section of code takes two parameters iSizeX and iSizeY. iSizeX is the width of our texture and iSizeY is the height of our texture. Once we know the height and width it's easy to calculate the amount of memory required.

The first thing we do is create a variable called lSize. This variable will hold the size. We figure out the size required by multiplying the width by the height+1 by the number of bytes we require. We need bytes for Red, Green, Blue and our Alpha value, so we multiply by 4.

In this program we know that both textures are the same size (256x256x4) so we make both buffers the same size. We also check for errors while creating the buffer and exit if an error is encountered.
int AllocateTextureBuffer (int iSizeX, int iSizeY)				// Allocates Memory For The Buffer
{
    long lSize = ((iSizeX+1) * (iSizeY+1)) * 4;				// Compute Size Of The Buffer
    cTexBuffer = new unsigned char [lSize];					// Now Allocate The Memory

    if (cTexBuffer == NULL)							// Did We Allocate It Successfully?
        return -1;							// No? Jump Out

    cTexBuffer2 = new unsigned char [lSize];				// Now Allocate The Memory For Buffer 2

    if (cTexBuffer2 == NULL)						// Did We Allocate It Successfully?
        return -1;							// No? Jump Out

    return 0;
}
It's important that we release any memory that we allocated when we exit the program. The code below will do just that. It checks to see if we've allocated memory and if so it frees the memory. This code is called at the end of KillGLWindow().
void DestroyTextureBuffer ()							// Destroys The Buffers
{
    if (cTexBuffer)								// Did We Allocate The Memory Block?
        delete [] cTexBuffer;						// Then Destroy It!
    if (cTexBuffer2)							// Did We Allocate Memory Block Number Two?
        delete [] cTexBuffer2;						// Then Destroy It!
}
Now for a new, easy way of loading texture data into an OpenGL application: the RAW format! Raw is the easiest and fastest way to load a texture into a program (except auxDIBImageLoad of course!). Why is this so easy? Well, that´s easy to explain: The RAW format has usually only the pure image data without any headers or other crap. All you have to do is open the file and read the data in ...that´s it! Each pixel on the screen has a color; this color is split into RGB (Red,Green,Blue) values (separate bytes). The "alpha" value is a special color value that describes the pixel (How "visible" over the background it is). It´s not important to discuss this alpha value here because it's set to 255 by default.

The code below opens the .RAW file called monitor. If everything goes ok, a counter is set up called lCounter. We also manually define the image width (iWidth) and height (iHeight). This allows us to change the width and height easily if our texture size changes.
bool PrepareTexture ()
{
    FILE *Fh = fopen ("data/monitor.raw", "rb");				// Try To Open The RAW File
    if (!Fh) {								// Successfully Opened?
        return FALSE;
    }
    else {
        // 24 Bit RAW Image (4 Bytes With Alpha), 256x256 Pixels

        long lCounter;							// Linear Counter

        int iWidth  = 256;						// Image Width
        int iHeight = 256;						// Image Height
Once we have the basic variables defined, we create two loops. The first loop keeps track of the row, and the second loop keeps track of the current pixel in the row.
        for (int i = 0; i < iHeight; i++)				// For Each Row
        {
            for (int a = 0; a < iWidth; a++)			// For Each Pixel In A Row
            {
                // Get The RGBA Value
The first line below may look a little confusing, but it's really easy to understand. lCounter keeps track of where to store the pixels in our buffer. RAW images are stored upside down, so we have to flip the image the right way before we can use it, either that or we have to reverse the texture coordinates. I'd rather flip the image!

So lets break the line down... We take the height of the image (256) and subtract 1 from it. After that we subtract i We then multiply the result by iWidth * 4, and finally we add a * 4 to the result. Why do we do that you ask. Keep in mind that each line using our current textures is 256 pixels wide. Each pixel is 4 bytes. So a*4 is the actual width of our line in bytes. One line is represented by i. To move up and entire 256*4 bytes, we have to multiply iHeight-1-i by the row width (iWidth)*4. We then position ourselves in the line by adding a*4.

Once we have our current position in the buffer, we read in 3 bytes, one after another and store them at our current counter (lCounter) location for the red byte. The counter+1 for our blue byte and counter+2 for the green byte. We manually store a value of 255 into the alpha byte at lCounter+3. This gives us 4 bytes per pixel, with the 4th byte being an alpha value, and the first bytes being data read from the .RAW file.
                lCounter=((iHeight-1)-i)*(iWidth*4)+(a*4);	// Flip Texture While Loading
                cTexBuffer[lCounter] = fgetc(Fh);		// Red
                cTexBuffer[lCounter+1] = fgetc(Fh);		// Green
                cTexBuffer[lCounter+2] = fgetc(Fh);		// Blue
                cTexBuffer[lCounter+3] = 255;			// Alpha Value
            }
        }
After the entire image has been read in, we close the file and exit the program. If everything went ok, TRUE will be returned. If anything went wrong, FALSE will be returned.
        // Now Close The File, We Are Done!
        fclose (Fh);

        return TRUE;
    }

    return FALSE;
}
Okay, We have now discussed how to allocate some memory for our two buffers, we have loaded a RAW file into the first buffer ...but what now? We could create an OpenGL texture from our first buffer image data, but that´s not the goal of this tutorial. No, we want to create a texture, that has a part from a second (not loaded yet!) texture copied onto the first texture. How do we do this? Well, lets load our second texture. I will modify our above RAW loading code: Instead of loading data into buffer one (cTexBuffer), we will load the data into buffer two (cTexBuffer2). I know that´s a bit inefficient to copy & paste the same routine again, but I think it´s easier to understand :) Nothing is new in the code below, we're just loading a different texture and copying it into a new buffer.
bool PrepareTexture2 ()
{
    FILE *Fh = fopen ("gl.raw", "rb");					// Try To Open The RAW File
    if (!Fh) {								// Successfully Opened?
        return FALSE;
    }
    else {
        // 24 Bit RAW Image (4 Bytes With Alpha), 256x256 Pixels

        long lCounter;							// Linear Counter

        int iWidth  = 256;						// Image Width
        int iHeight = 256;						// Image Height

        for (int i = 0; i < iHeight; i++)				// For Each Row
        {
            for (int a = 0; a < iWidth; a++)			// For Each Pixel In A Row
            {
                // Get The RGBA Value
                lCounter=((iHeight-1)-i)*(iWidth*4)+(a*4);	// Flip Texture While Loading
                cTexBuffer2[lCounter] = fgetc(Fh);		// Red
                cTexBuffer2[lCounter+1] = fgetc(Fh);		// Green
                cTexBuffer2[lCounter+2] = fgetc(Fh);		// Blue
                cTexBuffer2[lCounter+3] = 255;			// Alpha Value
            }
        }

        // Now Close The File, We Are Done!
        fclose (Fh);

        return TRUE;
    }

    return FALSE;
}
Phew, now we´re done with that, it´s time to write a blitting function now which can project parts of texture two onto the first texture. Some readers may asking themselves now: What the heck is "blitting" ? Blitting is another word for copying parts of a data area to another data area. This word you´ll find mostly in graphics programming. This function we are creating allows the user to specify a rectangle (four coordinates) to select the data to be blitted, along with a destination position (X and Y) where the selected part will be blitted onto our first texture, a stretching parameter which can stretch (not shrink currently!) the selected part and blit it stretched onto the first texture, a parameter that specifies if the selected part should be blitted transparently (with additive blending), and finally a parameter that specifies the blending intensity, called iAlphaValue.

If you want to create a function like this, you should know something about linear graphic memory. When you´re looking at your screen, there are lot of pixel that represent a picture, a control, and yes, even the mouse pointer. Everything you see on your monitor depends on pixels. But how does the graphic card or bios know how to draw a pixel for example at the position X=64, Y=64? Because the graphic memory is a linear area, it calculates the memory position for the pixel 64,64 with the following formula:

MemoryAddress = (YPosition*ScreenSizeX)+XPosition

This means, if you are currently at a screen resolution at 640 x 480 pixel, the memory address for the pixel 64,64 would be 41024. Using the formula above 41024=(64*640)+64, 41024=40960+64, 41024=41024. Because the texture buffers are also linear, we can use the same method to copy and paste memory parts from our texture buffers. In the function below, we will multiply the result by 4, because for every pixel we have 4 values (R,G,B,A).

Stretching is just as easy as calculating the memory address: Just create an internal for-loop with the stretching scale. So the SAME content of the source texture (cTexBuffer2) will be ALSO drawn in the next line of our destination texture (cTexBuffer).

Now comes the interesting part: How to create alphablending? Imagine, that you have two pixel: One red pixel and one green pixel. Both pixels are lying on the same X and Y address. When you´re not blending the pixels, only one of them will be visible because the original pixel would be overwritten with the new pixel. As I said above, each pixel is made up of three color values: Red, Green and Blue. When we want to do alphablending we first calculate the inverse Alphavalue. You can do this by subtracting your chosen alpha intensity ( 0-255 ) from the maximum alpha-value (in this case it would be 256). Now we need two temporary integer variables that will hold our results. We call these two temporary variables iTemp1 and iTemp2. For the red pixel we´ll use iTemp1 and for the green pixel we´ll use iTemp2. It´s now time to fill our temporary variables. Just multiply the red pixel color values (rgb) by the chosen alpha value. Save the result in iTemp1. In iTemp2 we multiply the green pixel color values by the complementary alpha value (1.0 being the max alpha value). We are almost done! Now we just have to calculate our final, blended color from both pixel by adding both temporary variables together and divide the result by the maximum alpha value... that´s it! Now you have a fine, blended pixel with both color aspects of both pixels! Note, that you have to do this calculations for EVERY color component (Red,Green,Blue) of each pixel. This method of blending is an implementation of the blending equation glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA).
bool Blit (int iSourceX, int iSourceY, int iWidth, int iHeight, int iDestX, int iDestY, int iScale, bool bAlphaBlending, int iAlphaValue)
{
    // Temp Variables To Calculate The New Alpha Values
    long iTemp, iTemp2 = 0;
Calculate the source location in memory along with the destination location to blit to.
    // Calculate The Memory Addresses For The Start Of Blitting
    long lSourceAddrStart = ((iSourceY*256)+iSourceX)*4;
    long lDestAddrStart = ((iDestY*256)+iDestX)*4;
Make sure the scaling factor is not equal to 0. If it is, set the value to 1 to prevent problems when stretching.
    // No Scaling Wanted But Entered 0 As Parameter?
    // Bad Because With 0 The Function Does Not Work ...Correct This :)
    if (iScale == 0)
        iScale = 1;
Same thing with the alpha values. If the value is less than 0, we set the value to 0. Most images with an alpha value as low as 10 will barely be visible. You could not see the texture if the value was 0. We also check to see if the value is higher than 255. If it is, we set the value to 255. 255 Is about as solid as you're going to get.
    // Do This For The Alpha Value, Too!
    if (iAlphaValue < 0)
        iAlphaValue = 0;

    // Limit The Alpha Value To A Max Value Of 255.
    if (iAlphaValue > 255)
        iAlphaValue = 255;

    // Calculate The Size Of ONE Pixel Row In Our Texture
    long lRowSize = (iWidth*4) * iScale;

    // Build The Inverse Alpha Value
    int iInverseAlpha = 256 - iAlphaValue;

    // Stores The Final (Blended) Pixel Value
    long lResult = 0;

    // Our Two Temporary Buffers For ONE Row Of Each Texture
    unsigned char *cSourceBuffer = new unsigned char [lRowSize];
    unsigned char *cDestBuffer = new unsigned char [lRowSize];

    // Are They Correctly Allocated?
    if ((cSourceBuffer == 0) ||
        (cDestBuffer == 0))
    {
        return false;
    }

    // Now Process The Entire Selected Part
    for (int i=0; i < iHeight; i++)
    {
        for (int s=0; s < iScale; s++)
        {

            // Copy The Actual Row To Our Temporary Buffers!
            memcpy (cSourceBuffer, &cTexBuffer2[lSourceAddrStart], lRowSize);
            memcpy (cDestBuffer, &cTexBuffer[lDestAddrStart], lRowSize);

            // For Each Pixel In The Row
            for (int i=0; i<((iWidth*4)*iScale); i++)
            {
                // Do We Want To Blend The Part Over The Base Texture?
                if (bAlphaBlending)	{

                    // Calculate The New Pixel Color (RGB) With The Alpha Value
                    iTemp = cSourceBuffer[i] * iAlphaValue;

                    // Calculate The New Pixel Color (RGB) With The Inverse Alpha Value
                    iTemp2 = cDestBuffer[i] * iInverseAlpha;

                    // Now Add The Two New Values And Divide The Result By The Max Alpha Value (256)
                    // The Division Here Is Done With A Binary Shift To The Right, Because It´s A Lot Faster!
                    lResult = (iTemp + iTemp2) >> 8;

                    // Store The Result Into Our First (Destination) Texture
                    cTexBuffer[lDestAddrStart+i] = (char)lResult;
                }
                else {
                    // Store The Result Into Our First (Destination) Texture
                    cTexBuffer[lDestAddrStart+i] = cSourceBuffer[i];
                }
            }

            // Only Needed For Stretching: Draw The Same Content Calculated Above In The Next Line, If Necessary!
            lDestAddrStart += 256 * 4;
        }

        // Next Row, Please
        lSourceAddrStart += 256 * 4;
    }

    // Destroy The Temporary Buffers
    delete cDestBuffer;
    delete cSourceBuffer;

    return true;
}
The last thing we have to do is to update and create the new OpenGL texture. This is easily done with the code below! I don´t explain this function because It's already been covered in former tutorials! We specify the size ourself (256 x 256), and use the data stored in cTexBuffer.
void BuildTexture ()
{
    // Create Texture
    glGenTextures(1, &texture[0]);
    glBindTexture(GL_TEXTURE_2D, texture[0]);
    glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MAG_FILTER,GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D,GL_TEXTURE_MIN_FILTER,GL_LINEAR);

    gluBuild2DMipmaps(GL_TEXTURE_2D, GL_RGB, 256, 256, GL_RGBA, GL_UNSIGNED_BYTE, cTexBuffer);
}
Well, that´s it! Now the doors are open for creating some very cool blending effects for your games, engines or even applications. With texture buffers we used in this tutorial you could do more cool effects like real-time plasma or water. When combining these effects all together you´re able to do nearly photo-realistic terrain. If something doesn´t work in this tutorial or you have suggestions how to do it better, then please don´t hesitate to E-Mail me. Thank you for reading and good luck in creating your own special effects!

Some information about the author: I´m an 18 years old pupil who is currently studying to be a software engineer. I´ve been programming for nearly 10 years now. I've been programming in OpenGL for about 1.5 years now.

Andreas Löffler - Code / HTML
Jeff Molofee (NeHe) - HTML / Code Modifications